<!-- 
  TODO 成本管理 / 应付模板-列表内容
 -->
<template>
  <el-main class="payable-model-list">
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      class="el-search-form"
      :model="listParm"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        class="item-search"
        prop="modelName"
      >
        <el-input
          v-model="listParm.modelName"
          placeholder="模板名称名称"
          clearable
        />
      </el-form-item>
      <el-form-item
        prop="feeItemCategoryId"
        class="item-search"
      >
        <BaseSelect
          v-model:modelValue="listParm.feeItemCategoryId"
          :options="feeItemCategoryList"
          :filterable="false"
          clearable
          placeholder="费项类型"
          remote
          :is-loading="true"
        />
      </el-form-item>
      <el-form-item
        prop="feeItemId"
        class="item-search"
      >
        <BaseSelect
          v-model:modelValue="listParm.feeItemId"
          :options="costFeeItemList"
          :fields-obj="fieldsObj"
          placeholder="费用类型"
          clearable
          remote
          :is-loading="true"
        />
      </el-form-item>
      <el-form-item
        prop="providerId"
        class="item-search"
      >
        <BaseSelect
          v-model:modelValue="listParm.providerId"
          :options="allProvidersList"
          placeholder="渠道商"
          clearable
          remote
          :is-loading="true"
        />
      </el-form-item>
      <el-form-item class="item-search starting-time-item">
        <el-date-picker
          v-model="payableModelState.date"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="payableModelState.loading"
          :icon="Search"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          style="color: #ff7670"
          :loading="payableModelState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:payableModel:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <VxeBasicTable
      ref="payableModelGridRef"
      v-bind="payableModelListOptions"
    >
      <template #activeFlag="{ row }">
        <el-tag :type="row.activeFlag ? 'success' : 'info'">
          {{ row.activeFlag ? '激活' : '停用' }}
        </el-tag>
      </template>
      <template #actions="scope">
        <DropDownButtons
          :model-value="scope.row"
          :action-options="payableModelActionOptions"
          :disabled-arr="payableModelState.disabledArr"
          @click-change="hanleChangeAction"
          @visible-change="changeVisibleChange($event, scope)"
        >
          <template #islabel="{ item }">
            {{ scope.row.activeFlag ? item.islabel : item.label }}
          </template>
        </DropDownButtons>
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="listParm.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="listParm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listParm.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 新增或编辑应付模版 -->
  <PayableModelAdd
    ref="payableModelAddRef"
    @save-payable-model="hanleSavePayableModel"
  />
</template>
<script lang="ts" setup name="payableModel">
import { Search, Plus, RefreshRight } from "@element-plus/icons-vue";
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { usePayableModelList } from '@/composables/business/feeModel/payableModel/usePayableModelList';
import { VxeBasicTable } from "@/components/VxeTable";
import { usePayableModelListModel } from "@/composables/business/feeModel/payableModel/usePayableModelListModel";
import DropDownButtons from '@/components/DropDownButtons/index.vue';
import PayableModelAdd from './payableModelAdd.vue';
import { useInitTableHeight } from "@/hooks/useInitTableHeight";

// 表格配置
const { payableModelActionOptions, payableModelListOptions, payableModelGridRef } = usePayableModelListModel()
//初始化表格高度
useInitTableHeight(payableModelListOptions);
const {
  listParm,
  payableModelState,
  payableModelAddRef,
  fieldsObj,
  addBtn,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  hanleChangeAction,
  changeVisibleChange,
  hanleSavePayableModel,
  feeItemCategoryList,
  costFeeItemList,
  allProvidersList
} = usePayableModelList(payableModelListOptions)
</script>
<style lang="scss" scoped>
.payable-model-list {
}
</style>