<!-- 
    TODO: 审批人员列表
 -->
<template>
  <el-main>
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      class="el-search-form"
      :model="approvalUserParams"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        class="approval-search"
        prop="approvalType"
      >
        <BaseSelect
          v-model:modelValue="approvalUserParams.approvalType"
          :options="approvalTypeList"
          :filterable="false"
          :clearable="true"
          placeholder="审批类型"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="approvalUserState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="approvalUserState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:country:delete']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          添加
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="approvalUserListOptions"
      ref="financialVerifyListTableRef"
    >
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="approvalUserListActionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="approvalUserParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="approvalUserParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="approvalUserParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 添加、编辑 -->
  <ApprovalUsers
    ref="approvalUserAddEditRef"
    :approval-type-list="approvalTypeList"
    :sys-user-list="sysUserList"
    @on-confirm-save="onConfirmSave"
  />
</template>
<script lang="ts" setup name="approvalUser">
import { Search, RefreshRight, Plus } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { VxeBasicTable } from "@/components/VxeTable/index";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import { useApprovalUserModel } from "@/composables/approvalUser/useApprovalUserModel";
import { useApprovalUser } from "@/composables/approvalUser/useApprovalUser";
import ApprovalUsers from './ApprovalUsers.vue';

const { approvalUserListOptions, approvalUserListActionOptions } =
  useApprovalUserModel();
//   初始化表格高度
useInitTableHeight(approvalUserListOptions);

const {
  searchFormRef,
  approvalUserState,
  approvalUserParams,
  approvalUserAddEditRef,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  addBtn,
  handleClickChange,
  approvalTypeList,
  sysUserList,
  onConfirmSave
} = useApprovalUser(approvalUserListOptions);
</script>
<style lang="scss" scoped>
.el-search-form {
  width: 100%;

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