<template>
  <el-main>
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      class="el-search-form"
      :model="listParm"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        v-if="getIsSell"
        prop="belongUserId"
        class="feeset-search"
      >
        <BaseSelectV2
          v-model:modelValue="listParm.belongUserId"
          clearable
          :options="getSalesmanUsesList"
          :height="272"
          popper-class="salesmanId-w"
          placeholder="业务员"
        />
      </el-form-item>
      <el-form-item
        class="feeset-search"
        prop="feeSetName"
      >
        <el-input
          v-model="listParm.feeSetName"
          placeholder="请输入费用名称"
        />
      </el-form-item>
      <el-form-item
        class="feeset-search"
        prop="productId"
      >
        <BaseSelectV2
          v-model:modelValue="listParm.productId"
          :options="dropDownSelectList.productSelectList"
          popper-class="productId-w"
          :height="272"
          :clearable="true"
          placeholder="请选择产品"
        />
      </el-form-item>
      <el-form-item
        class="feeset-search"
        prop="orgId"
      >
        <BaseSelect
          v-model:modelValue="listParm.orgId"
          :filterable="false"
          clearable
          :options="dropDownSelectList.orgSelectList"
          placeholder="请选择分公司"
        />
      </el-form-item>
      <el-form-item
        class="feeset-search"
        prop="customerIdList"
      >
        <BaseSelectV2
          v-model:modelValue="listParm.customerIdList"
          :options="dropDownSelectList.customerSelectList"
          popper-class="customerId-w"
          :height="272"
          :clearable="true"
          :multiple="true"
          :collapse-tags="true"
          placeholder="客户"
          :is-loading="true"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item
        class="feeset-search"
        prop="feeSetType"
      >
        <BaseSelect
          v-model:modelValue="listParm.feeSetType"
          :filterable="false"
          clearable
          :options="feeSetTypeList"
          placeholder="费用类型"
        />
      </el-form-item>
      <el-form-item class="feeset-effective-search">
        <BaseSelect
          v-model:modelValue="listParm.currentEffective"
          :filterable="false"
          :options="dropDownSelectList.currentEffectiveList"
          placeholder="当前生效记录"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="customerFeeSetList.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="customerFeeSetList.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:customerfeeset:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
        <el-button
          :icon="Bell"
          type="success"
          @click="hanleNewsInfoRef"
        >
          通知
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格列配置 -->
    <BaseVxeToolbar
      :columns="feeSetColumns"
      @on-toolbar-confirm="hanleToolbarConfirm"
      @on-toolbar-reset="hanleToolbarReset"
    />
    <!-- 表格 -->
    <VxeBasicTable
      ref="customerFeeSetGridRef"
      v-bind="customerFeeSetGridOptions"
      @checkbox-all="handleSelectionChange"
      @checkbox-change="handleSelectionChange"
    >
      <template #expands="scope">
        <div>
          <VxeBasicTable
            ref="customerExpandFeeSetGridRef"
            v-bind="customerExpandGridOptions"
            :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 }">
              {{ row.beginDate }}
            </template>
            <template #endDate="{ row }">
              {{ row.endDate }}
            </template>
            <template #feeApprovalStatusName="{ row }">
              <el-tag
                v-show="row.feeApprovalStatusName"
                :type="deal_getFeeApprovalStatusTag(row.feeApprovalStatus)"
                @click="onApprovalRecord(row)"
              >
                {{ row.feeApprovalStatusName }}
              </el-tag>
            </template>
            <template #recalculate="{ row }">
              <el-tag
                :type="row.recalculate === RecalculateType.YES ? 'success' : 'info'"
              >
                {{ row.recalculate === RecalculateType.YES ? "是" : "否" }}
              </el-tag>
            </template>
            <!-- 建议价 -->
            <template #recommendFeeSet="{ row }">
              <el-tag
                :type="row.recommendFeeSet ? 'success' : 'info'"
              >
                {{ row.recommendFeeSet ? "是" : "否" }}
              </el-tag>
            </template>
            <template #actions="sonScope">
              <DropDownButtons
                :model-value="sonScope.row"
                :action-options="actionOptions"
                :disabled-arr="stateSelectList.disabledArr"
                :is-show-arr="stateSelectList.isShowArr"
                @click-change="hanleChangeAction($event, FeeSetFoldingLayer.SUBDATA)"
                @visible-change="changeVisibleChange($event, sonScope)"
              >
                <template #islabel="{ item }">
                  {{ sonScope.row.activeFlag ? item.islabel : item.label }}
                </template>
              </DropDownButtons>
            </template>
          </VxeBasicTable>
        </div>
      </template>
      <template #activeFlag="{ row }">
        <el-tag :type="row.activeFlag ? 'success' : 'info'">
          {{ row.activeFlag ? "激活" : "停用" }}
        </el-tag>
      </template>
      <template #beginDate="{ row }">
        {{ row.beginDate }}
      </template>
      <template #endDate="{ row }">
        {{ row.endDate }}
      </template>
      <template #feeApprovalStatusName="{ row }">
        <el-tag
          v-show="row.feeApprovalStatusName"
          :type="deal_getFeeApprovalStatusTag(row.feeApprovalStatus)"
          @click="onApprovalRecord(row)"
        >
          {{ row.feeApprovalStatusName }}
        </el-tag>
      </template>
      <template #recalculate="{ row }">
        <el-tag
          :type="row.recalculate === RecalculateType.YES ? 'success' : 'info'"
        >
          {{ row.recalculate === RecalculateType.YES ? "是" : "否" }}
        </el-tag>
      </template>
      <template #recommendFeeSet="{ row }">
        <el-tag
          :type="row.recommendFeeSet ? 'success' : 'info'"
        >
          {{ row.recommendFeeSet ? "是" : "否" }}
        </el-tag>
      </template>
      <template #actions="parentScope">
        <DropDownButtons
          :model-value="parentScope.row"
          :action-options="actionOptions"
          :disabled-arr="stateSelectList.disabledArr"
          :is-show-arr="stateSelectList.isShowArr"
          @click-change="hanleChangeAction($event, FeeSetFoldingLayer.GOLDEN_DATA)"
          @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>
  <!-- 新增、编辑弹框 
 :productSelectList="productSelectList.list"
 :stateSelectList="stateSelectList.list"
 :orgSelectList="orgSelectList.list"
 :customerSelectList="customerSelectList.list"
 :feeSetTypeSelectList="feeSetTypeSelectList.list"
-->
  <AddandEditCustomerFeeSet
    ref="adCustomerFeeSetRef"
    :product-select-list="productSelectList_"
    :group-select-list="stateSelectList.list"
    :customer-select-list="dropDownSelectList.customerSelectList"
    :fee-set-type-select-list="feeSetTypeList"
    :org-select-list="dropDownSelectList.orgSelectList"
    @filterMethod="definFilter"
    @save="save"
    @change-select="hanleChangeSelect"
  />
  <!-- 费用设置详情弹框 -->
  <AddandEditCustomerFeeSetDetail
    ref="adCustomerFeeSetDetailRef"
    :product-select-list="dropDownSelectList.productSelectList"
    @save-fee-base="hanleSaveFeeBase"
  />
  <!-- 上传文件 -->
  <!-- <BaseUpload ref="baseUploadRef" /> -->
  <!-- 通知 -->
  <BaseNewsInfo
    ref="baseNewsInfoRef"
    :multiple-selection="multipleSelectionData"
    @save-notice="hanleSaveNotice"
  />
  <!-- 客户费用设置提示 -->
  <FeeNoticeShow
    ref="feeNoticeShowRef"
    :customer-fee-set-compare-list="customerFeeSetCompare.list"
    @on-confirm="onFeeNoticeConfirm"
    @on-apply="onFeeNoticeApply"
  />
  <!-- 客户费用接管 -->
  <AddEditAdministrator
    ref="addEditAdministratorRef"
    :sys-user-list="sysUserList"
    @confirm-administrator="hanleConfirmAdministrator"
  />
  <!-- 审批流程 -->
  <Approval
    ref="customerFeeApprovalRef"
    :is-edit="false"
    :fee-approval-status-list="feeApprovalStatusList"
  />
  <!-- 终止生效时间 -->
  <StopEndDate
    ref="stopEndDateRef"
    @confirm-stop-end-date="hanleStopEndDate"
  />
  <!-- 按比例拷贝 -->
  <CustomerProportionCopy
    ref="customerProportionCopyRef"
    @on-confirm-proportion-copy="hanleConfirmProportionCopy"
  />
  <!-- 费用分组信息 -->
  <CustomerGroupRepeatInfo ref="customerGroupRepeatInfoRef" />
</template>
<script setup lang="ts" name="customerfeeset">
import {
  Search,
  Plus,
  RefreshRight,
  Loading,
  Bell
} from "@element-plus/icons-vue";
import userCustomerFeeSetTable from "@/composables/customerfeeset/useCustomerFeeSetTable";
import useCustomerFeeSet from "@/composables/customerfeeset/useCustomerFeeSet";
import AddandEditCustomerFeeSet from "./AddandEditCustomerFeeSet.vue";
import CustomerGroupRepeatInfo from './CustomerGroupRepeatInfo.vue';
import useDefinFilter from "@/hooks/useDefinFilter";
// import timeFiltering from "@/utils/timeFiltering";
import AddandEditCustomerFeeSetDetail from "./AddandEditCustomerFeeSetDetail.vue";
import CustomerProportionCopy from './CustomerProportionCopy.vue';
import { useDeleteCache } from "@/hooks/useDeleteCache";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import BaseSelectV2 from "@/components/QuerySelect/BaseSelectV2.vue";
import BaseNewsInfo from "@/components/NewsInfo/BaseNewsInfo.vue";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import FeeNoticeShow from "./FeeNoticeShow.vue";
import AddEditAdministrator from '@/views/customerFeeSetAdministrator/addEditAdministrator.vue';
import { deal_getFeeApprovalStatusTag } from "@/utils/dealData";
import Approval from '@/views/customerFeeApproval/approval.vue';
import { RecalculateType } from "@/type/BaseEnum";
import BaseVxeToolbar from '@/components/BaseVxeToolbar/BaseVxeToolbar.vue';
import StopEndDate from '@/components/StopEndDate/index.vue';
import { FeeSetFoldingLayer } from "@/type/BaseBusinessFeeseType";

// 删除缓存
const instance = useDeleteCache();
//表格列表
const {
  listParm,
  searchFormRef,
  customerFeeSetList,
  multipleSelectionData,
  getCustomerFeeSetList,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  dropDownSelectList,
  actionOptions,
  handleSelectionChange,
  handleSonSelectionChange,
  hanleNewsInfoRef,
  clearCheckboxRow,
  hanleToolbarConfirm,
  hanleToolbarReset,
  baseNewsInfoRef,
  customerFeeSetGridRef,
  customerExpandFeeSetGridRef,
  customerFeeSetGridOptions,
  customerExpandGridOptions,
  VxeBasicTable,
  feeSetColumns,
  getproductSelectList
} = userCustomerFeeSetTable();
// 初始化表格高度
useInitTableHeight(customerFeeSetGridOptions, 560);
// 产品首字母搜索
const { definFilter, typeList: productSelectList_ } = useDefinFilter(
  dropDownSelectList,
  "productSelectList"
);
//新增、编辑
const {
  addBtn,
  hanleChangeAction,
  changeVisibleChange,
  adCustomerFeeSetRef,
  adCustomerFeeSetDetailRef,
  feeNoticeShowRef,
  addEditAdministratorRef,
  customerFeeApprovalRef,
  stopEndDateRef,
  customerProportionCopyRef,
  customerGroupRepeatInfoRef,
  save,
  hanleSaveFeeBase,
  hanleChangeSelect,
  hanleSaveNotice,
  hanleStopEndDate,
  stateSelectList,
  customerFeeSetCompare,
  onFeeNoticeConfirm,
  onFeeNoticeApply,
  onApprovalRecord,
  sysUserList,
  feeSetTypeList,
  feeApprovalStatusList,
  getSalesmanUsesList,
  hanleConfirmAdministrator,
  hanleConfirmProportionCopy,
  getIsSell
} = useCustomerFeeSet(
  getCustomerFeeSetList,
  clearCheckboxRow,
  customerFeeSetList,
  customerFeeSetGridRef,
  getproductSelectList
);
</script>

<style lang="scss" scoped>
.el-search-form {
  width: 100%;

  // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
  .feeset-search {
    width: 164px;
    margin-right: 8px;
  }
  .feeset-effective-search {
    width: 114px;
    margin-right: 8px; 
  }
}
</style>
