<!-- 
  TODO 客户分组分页界面
 -->
<template>
  <el-main class="global-search customer-group-list">
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      :inline="true"
      :model="customerGroupParms"
      label-width="80px"
    >
      <el-form-item
        class="query-search"
        prop="productId"
      >
        <BaseSelectV2
          v-model:modelValue="customerGroupParms.productId"
          :options="productList"
          popper-class="productId-w"
          :height="272"
          :clearable="true"
          placeholder="请选择产品"
        />
      </el-form-item>
      <el-form-item
        class="query-search"
        prop="orgId"
      >
        <BaseSelect
          v-model:modelValue="customerGroupParms.orgId"
          :filterable="false"
          clearable
          :options="branchCompanyCustomers"
          placeholder="请选择分公司"
        />
      </el-form-item>
      <el-form-item
        class="query-search"
        prop="groupName"
      >
        <el-input
          v-model="customerGroupParms.groupName"
          placeholder="请输入分组名称"
        />
      </el-form-item>
      <el-form-item
        class="query-search group-search"
        prop="customerIdList"
      >
        <BaseSelectV2
          v-model:modelValue="customerGroupParms.customerIdList"
          :options="customertList"
          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>
        <el-button
          :icon="Search"
          :loading="customerGroupState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="customerGroupState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:customerGroup:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="customerGroupListGridOptions"
      ref="customerGroupListTableRef"
    >
      <!-- 子数据列表 -->
      <template #expands="sonScope">
        <VxeBasicTable
          v-bind="customerGroupListSonGridOptions"
          :data="sonScope.row.customerGroupList"
        >
          <!-- 机构名称 -->
          <template #orgId="{ row }">
            {{ deal_FindGetItemName(row.orgId, branchCompanyCustomers) }}
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <DropDownButtons
              :model-value="row"
              :action-options="customerGroupListActionOptions"
              @click-change="handleClickChange"
            />
          </template>
        </VxeBasicTable>
      </template>
      <!-- 机构名称 -->
      <template #orgId="{ row }">
        {{ deal_FindGetItemName(row.orgId, branchCompanyCustomers) }}
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="customerGroupListActionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="customerGroupParms.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="customerGroupParms.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="customerGroupParms.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 设置客户 -->
  <AddCustomerFeeSet
    ref="refAddCustomerFeeSet"
    :customer-list="customertList"
    :org-select-list="branchCompanyCustomers"
    :group-select-list="customerGroupState.customerGroupList"
    :org-id="customerGroupState.orgId"
    @save-feeset-customer="hanleSaveFeesetCustomer"
  />
</template>
<script lang="ts" setup name="customerGroup">
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import BaseSelectV2 from "@/components/QuerySelect/BaseSelectV2.vue";
import { Search, Plus, RefreshRight } from "@element-plus/icons-vue";
import { useCustomerGroupList } from "@/composables/customerGroup/useCustomerGroupList";
import { useCustomerGroupListModel } from "@/composables/customerGroup/useCustomerGroupModel";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import { VxeBasicTable } from "@/components/VxeTable";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import AddCustomerFeeSet from "@/views/customerfeeset/AddCustomerFeeSet.vue";
import { deal_FindGetItemName } from "@/utils/dealFindData";

const { customerGroupListGridOptions, customerGroupListSonGridOptions, customerGroupListActionOptions } = useCustomerGroupListModel();
// 初始化表格高度
useInitTableHeight(customerGroupListGridOptions, 560);
const {
  searchFormRef,
  customerGroupParms,
  customerGroupState,
  productList,
  customertList,
  branchCompanyCustomers,
  addBtn,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  handleClickChange,
  refAddCustomerFeeSet,
  hanleSaveFeesetCustomer
} = useCustomerGroupList(customerGroupListGridOptions);
</script>
<style lang="scss" scoped>
.customer-group-list {
  .group-search {
    width: 208px;
  }
}
</style>
