<!-- 
    TODO: 审批记录列表
 -->
<template>
  <el-main>
    <!-- customerfee-approvallist -->
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      class="el-search-form"
      :model="customerFeeApprovalParams"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        class="approval-search"
        prop="salesmanId"
      >
        <BaseSelect
          v-model:modelValue="customerFeeApprovalParams.salesmanId"
          :options="salesmanUserList"
          :clearable="true"
          placeholder="请输入业务人员"
        />
      </el-form-item>
      <el-form-item
        class="approval-search"
        prop="feeId"
      >
        <BaseSelect
          v-model:modelValue="customerFeeApprovalParams.feeId"
          :options="customerFeeSetNameList"
          :clearable="true"
          placeholder="请选择费用名称"
        />
      </el-form-item>
      <el-form-item
        class="approval-search"
        prop="productId"
      >
        <BaseSelectV2
          v-model:modelValue="customerFeeApprovalParams.productId"
          :options="productList"
          popper-class="productId-w"
          :height="272"
          :clearable="true"
          placeholder="请选择产品名称"
        />
      </el-form-item>
      <el-form-item class="approval-search starting-time-item">
        <el-date-picker
          v-model="customerFeeApprovalState.dateArr"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="customerFeeApprovalState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="customerFeeApprovalState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="customerFeeApprovalListOptions"
      ref="financialVerifyListTableRef"
    >
      <!-- 审批状态 -->
      <template #feeApprovalStatusName="{ row }">
        <el-tag :type="deal_getFeeApprovalStatusTag(row.feeApprovalStatus)">
          {{ row.feeApprovalStatusName }}
        </el-tag>
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="customerFeeApprovalListActionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="customerFeeApprovalParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="customerFeeApprovalParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="customerFeeApprovalParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 审批流程 -->
  <Approval
    ref="customerFeeApprovalRef"
    :fee-approval-status-list="feeApprovalStatusList"
    :is-edit="customerFeeApprovalState.isEdit"
    @confirm-approval="confirmApproval"
  />
</template>
<script lang="ts" setup name="customerFeeApproval">
import { Search, RefreshRight } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import BaseSelectV2 from "@/components/QuerySelect/BaseSelectV2.vue";
import { useCustomerFeeApproval } from "@/composables/customerFeeApproval/useCustomerFeeApproval";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { VxeBasicTable } from "@/components/VxeTable/index";
import { useCustomerFeeApprovalModel } from "@/composables/customerFeeApproval/useCustomerFeeApprovalModel";
import { deal_getFeeApprovalStatusTag } from "@/utils/dealData";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import Approval from './Approval.vue';

const { customerFeeApprovalListOptions, customerFeeApprovalListActionOptions } =
  useCustomerFeeApprovalModel();
  //   初始化表格高度
useInitTableHeight(customerFeeApprovalListOptions);
const {
  searchFormRef,
  customerFeeApprovalRef,
  customerFeeApprovalParams,
  customerFeeApprovalState,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  handleClickChange,
  salesmanUserList,
  productList,
  customerFeeSetNameList,
  feeApprovalStatusList,
  confirmApproval
} = useCustomerFeeApproval(customerFeeApprovalListOptions);
</script>
<style lang="scss">
.el-search-form {
  width: 100%;

  .approval-search {
    width: 184px;
    margin-right: 11px;
  }
}
</style>
