<!-- 
  TODO 成本管理 / 应付模板-列表内容
 -->
<template>
  <el-main class="receivable-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"
          placeholder="费项类型"
          clearable
          remote
          :is-loading="true"
        />
      </el-form-item>
      <el-form-item
        prop="feeItemId"
        class="item-search"
      >
        <BaseSelect
          v-model:modelValue="listParm.feeItemId"
          :options="feeItemLists"
          :fields-obj="fieldsObj"
          placeholder="费用类型"
          clearable
          remote
          :is-loading="true"
        />
      </el-form-item>
      <el-form-item class="item-search starting-time-item">
        <el-date-picker
          v-model="receivableModelList.date"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="receivableModelList.loading"
          :icon="Search"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          style="color: #ff7670"
          :loading="receivableModelList.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:receivableModel:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <VxeBasicTable
      ref="receivableGridRef"
      v-bind="receivableListOptions"
    >
      <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="receivableActionOptions"
          :disabled-arr="receivableModelList.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>
  <!-- 新增应收模版 -->
  <FeeCategoryReceivableModelSet
    ref="addReceivableModelSetRef"
    @save-receivable-model="hanleSaveReceivableModel"
  />
</template>
<script lang="ts" setup name="receivableModel">
import { Search, Plus, RefreshRight } from "@element-plus/icons-vue";
import { useReceivableModelList } from '@/composables/business/feeModel/receivable/useReceivableModelList';
import DropDownButtons from '@/components/DropDownButtons/index.vue';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { VxeBasicTable } from "@/components/VxeTable";
import { useReceivableModel } from "@/composables/business/feeModel/receivable/useReceivableModel";
import FeeCategoryReceivableModelSet from './feeCategoryReceivableModelSet.vue';
import { useInitTableHeight } from "@/hooks/useInitTableHeight";

const { 
  receivableGridRef, 
  receivableListOptions,
  receivableActionOptions
 } = useReceivableModel()
//初始化表格高度
useInitTableHeight(receivableListOptions);

const { 
  listParm, 
  receivableModelList,
  addReceivableModelSetRef,
  searchFormRef,
  searchBtn, 
  resetBtn,
  addBtn,
  hanleChangeAction,
  sizeChange,
  currentChange,
  hanleSaveReceivableModel,
  changeVisibleChange,
  feeItemLists,
  feeItemCategoryList,
  fieldsObj
} = useReceivableModelList(receivableListOptions)
</script>
<style lang="scss" scoped>
.el-search-form {
  .item-search {
    width: 196px;
    margin-right: 11px;
  }
}
</style>