<!-- 
  TODO 成本管理 / 成本费用设置
 -->
<template>
  <el-main class="provider-feeset-list">
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      class="el-search-form"
      :model="listParm"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        class="item-search"
        prop="feeSetName"
      >
        <el-input
          v-model="listParm.feeSetName"
          placeholder="费用名称"
          clearable
        />
      </el-form-item>
      <el-form-item
        class="item-search"
        prop="providerId"
      >
        <BaseSelectV2
          v-model:modelValue="listParm.providerId"
          :options="allProvidersList"
          popper-class="booking-agentId-w"
          :height="272"
          :clearable="true"
          placeholder="服务商"
          :is-loading="true"
        />
      </el-form-item>
      <el-form-item
        class="item-search"
        prop="feeItemCategory"
      >
        <BaseSelect
          v-model:modelValue="listParm.feeItemCategory"
          :options="feeItemCategoryList"
          placeholder="费项类型"
          clearable
        />
      </el-form-item>
      <el-form-item
        class="item-search"
        prop="productId"
      >
        <BaseSelectV2
          v-model:modelValue="listParm.productId"
          :options="deliverChannelList"
          popper-class="productId-w"
          :height="272"
          :clearable="true"
          placeholder="产品名称"
        />
      </el-form-item>
      <el-form-item class="item-search">
        <el-select
          v-model="listParm.currentEffective"
          clearable
          :filterable="true"
          placeholder="生效记录"
        >
          <el-option
            v-for="item in providerFeeSetList.effectivelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="providerFeeSetList.loading"
          :icon="Search"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          style="color: #ff7670"
          :loading="providerFeeSetList.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:costfeeitemset:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <VxeBasicTable
      v-bind="providerFeeSetListOptions"
      ref="providerFeeSetGridRef"
      :data="providerFeeSetList.tableList"
      @checkbox-all="handleSelectionChange"
      @checkbox-change="handleSelectionChange"
    >
      <template #expands="scope">
        <VxeBasicTable
          v-bind="providerFeeSetExpandOptions"
          :data="scope.row.customerFeeSetList"
          @checkbox-change="handleSonSelectionChange"
        >
          <template #activeFlag="{ row }">
            <el-tag :type="row.activeFlag ? 'success' : 'info'">
              {{ row.activeFlag ? '激活' : '停用' }}
            </el-tag>
          </template>
          <template #beginDate="{ row }">
            {{ timeFiltering(row.beginDate) }}
          </template>
          <template #endDate="{ row }">
            {{ timeFiltering(row.endDate) }}
          </template>
          <template #actions="sonScope">
            <DropDownButtons
              :model-value="sonScope.row"
              :action-options="providerFeeSetActionOptions"
              :disabled-arr="providerFeeSetList.disabledArr"
              @click-change="hanleChangeAction"
              @visible-change="changeVisibleChange($event, sonScope)"
            >
              <template #islabel="{ item }">
                {{ sonScope.row.activeFlag ? item.islabel : item.label }}
              </template>
            </DropDownButtons>
          </template>
        </VxeBasicTable>
      </template>
      <template #activeFlag="{ row }">
        <el-tag :type="row.activeFlag ? 'success' : 'info'">
          {{ row.activeFlag ? '激活' : '停用' }}
        </el-tag>
      </template>
      <template #beginDate="{ row }">
        {{ timeFiltering(row.beginDate) }}
      </template>
      <template #endDate="{ row }">
        {{ timeFiltering(row.endDate) }}
      </template>
      <template #actions="parentScope">
        <DropDownButtons
          :model-value="parentScope.row"
          :action-options="providerFeeSetActionOptions"
          :disabled-arr="providerFeeSetList.disabledArr"
          @click-change="hanleChangeAction"
          @visible-change="changeVisibleChange($event, parentScope)"
        >
          <template #islabel="{ item }">
            {{ parentScope.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>
  <!-- 添加或编辑成本费用设置 -->
  <AddEditProviderFeeSet
    ref="addEditProviderFeeSetRef"
    @save-fee-base="hanleSaveFeeBase"
  />
</template>
<script lang="ts" setup name="providerFeeSet">
import { Search, Plus, RefreshRight } from "@element-plus/icons-vue";
import { useProviderFeeSet } from '@/composables/business/providerfeeset/useProviderFeeSet';
import timeFiltering from "@/utils/timeFiltering";
import AddEditProviderFeeSet from './AddEditProviderFeeSet.vue';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import BaseSelectV2 from '@/components/QuerySelect/BaseSelectV2.vue';
import { useProviderFeeSetTable } from "@/composables/business/providerfeeset/useProviderFeeSetTable";
import { VxeBasicTable } from "@/components/VxeTable";
import DropDownButtons from '@/components/DropDownButtons/index.vue';
import { useInitTableHeight } from "@/hooks/useInitTableHeight";

// 表格配置
const {
  providerFeeSetListOptions,
  providerFeeSetActionOptions,
  providerFeeSetExpandOptions,
  providerFeeSetGridRef
} = useProviderFeeSetTable()
 // 初始化表格高度
 useInitTableHeight(providerFeeSetListOptions, 480);
// 初始化数据
const {
  listParm,
  searchFormRef,
  providerFeeSetList,
  addEditProviderFeeSetRef,
  feeItemCategoryList,
  allProvidersList,
  deliverChannelList,
  changeVisibleChange,
  searchBtn,
  resetBtn,
  addBtn,
  hanleChangeAction,
  sizeChange,
  currentChange,
  hanleSaveFeeBase,
  handleSelectionChange,
  handleSonSelectionChange
} = useProviderFeeSet(providerFeeSetListOptions, providerFeeSetGridRef)
</script>
<style lang="scss">
.provider-feeset-list {}
</style>