<!-- 
    TODO 客户费用接管
 -->
<template>
  <el-main class="administrator-list">
    <el-form
      ref="administratorListFormRef"
      :model="administratorListParams"
      inline
    >
      <el-form-item
        prop="feeSetName"
        class="item-search"
      >
        <el-input
          v-model="administratorListParams.feeSetName"
          placeholder="费用名称"
        />
      </el-form-item>
      <el-form-item
        prop="notifyUserType"
        class="item-search"
      >
        <BaseSelect
          v-model:modelValue="administratorListParams.notifyUserType"
          :filterable="false"
          clearable
          :options="notifyUserTypeList"
          placeholder="人员类型"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="administratorListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          class="reset-btn"
          :icon="RefreshRight"
          :loading="administratorListState.loading"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:customerFeeSetAdministrator:add']"
          type="success"
          :icon="Plus"
          plain
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="administratorListOptions"
      ref="financialVerifyListTableRef"
    >  
      <!-- 类型 -->
      <template #notifyUserType="{ row }">
        <div>
          {{ deal_FindItemName(row.notifyUserType, notifyUserTypeList) }}
        </div>
      </template>    
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="administratorListActionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="administratorListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="administratorListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="administratorListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 添加或编辑 -->
  <AddEditAdministrator
    ref="addEditAdministratorRef"
    :sys-user-list="sysUserList"
    @confirm-administrator="hanleConfirmAdministrator"
  />
</template>
<script lang="ts" setup name="customerFeeSetAdministrator">
import { useAdministratorList } from "@/composables/customerFeeSetAdministrator/useAdministratorList";
import { Search, RefreshRight, Plus, Delete } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { useAdministratorListModel } from "@/composables/customerFeeSetAdministrator/useAdministratorListModel";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import AddEditAdministrator from './addEditAdministrator.vue';
import { deal_FindItemName } from "@/utils/dealFindData";
import DropDownButtons from "@/components/DropDownButtons/index.vue";

const { administratorListOptions, administratorListActionOptions } = useAdministratorListModel();
//   初始化表格高度
useInitTableHeight(administratorListOptions);
const {
  administratorListState,
  administratorListParams,
  administratorListFormRef,
  addEditAdministratorRef,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  addBtn,
  sysUserList,
  notifyUserTypeList,
  hanleConfirmAdministrator,
  handleClickChange
} = useAdministratorList(administratorListOptions);
</script>
<style lang="scss" scoped>
.administrator-list {
  .financial-search {
    width: 156px;
    margin-right: 11px;
  }
}
</style>
