<!-- 
    TODO 管理客户支付方式列表
 -->
<template>
  <el-main class="customer-list">
    <!-- 搜索栏 -->
    <el-form
      ref="searchFormRef"
      :inline="true"
      :model="customerListParams"
    >
      <el-form-item
        prop="orgId"
        class="customer-list-search"
      >
        <BaseSelect
          v-model:modelValue="customerListParams.orgId"
          :clearable="true"
          :options="branchCompanyCustomers"
          placeholder="分公司"
        />
      </el-form-item>
      <el-form-item
        prop="accountPeriod"
        class="customer-list-search"
      >
        <BaseSelect
          v-model:modelValue="customerListParams.accountPeriod"
          :clearable="true"
          :options="accountPeriodTypeList"
          placeholder="账期类型"
        />
      </el-form-item>
      <el-form-item
        prop="companyName"
        class="customer-list-search"
      >
        <!-- <el-input
          v-model="customerListParams.companyName"
          placeholder="客户名称"
        /> -->
        <el-popover
          placement="bottom"
          :width="340"
          @after-enter="afterEnterCustomerName"
        >
          <div>
            <el-input
              ref="multiCustomerNameRef"
              v-model="customerListState.inputMultiCustomerName"
              :rows="8"
              type="textarea"
              placeholder="请输入客户名称或以逗号(,)分开，每行一个"
              @change="changeCustomerName"
            />
            <div class="text-right">
              <el-button
                type="danger"
                link
                @click="hanlClearCustomerNameList"
              >
                清除
              </el-button>
              <el-button
                type="success"
                link
                @click="confirmMultiCustomerName"
              >
                确定
              </el-button>
            </div>
          </div>
          <template #reference>
            <el-input
              v-model="customerListState.inputCustomerName"
              placeholder="客户名称"
              @focus="focusCustomerName"
            />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item
        v-if="getShowSalesmanUser"
        prop="salesmanUserId"
        class="customer-list-search"
      >
        <BaseSelect
          v-model:modelValue="customerListParams.salesmanUserId"
          :clearable="true"
          :options="storePersonnel.salesmanUsesList"
          placeholder="业务员"
        />
      </el-form-item>
      <el-form-item
        prop="setPaymentFlag"
        class="customer-flag-search"
      >
        <BaseSelect
          v-model:modelValue="customerListParams.setPaymentFlag"
          :clearable="true"
          :options="customerListState.setPaymentFlagList"
          placeholder="已分配支付方式"
        />
      </el-form-item>
      <el-form-item class="btns">
        <el-button
          v-permission="['sys:customer:list']"
          :icon="Search"
          :loading="customerListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          v-permission="['sys:customer:list']"
          :loading="customerListState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:customer:paymentType']"
          plain
          :loading="customerListState.loading"
          :icon="Setting"
          type="success"
          @click="hanleBatchSetPayment"
        >
          批量设置支付
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable 
      v-bind="customerListGridOptions"
      ref="paymentTypeTableRef"
    >
      <!-- 机构名称 -->
      <template #orgId="{ row }">
        {{ deal_FindGetItemName(row.orgId, branchCompanyCustomers) }}
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <el-button
          v-permission="['sys:customer:paymentType']"
          link
          :icon="Setting"
          type="primary"
          @click="hanleSetPaymentType(row)"
        >
          支付方式
        </el-button>
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="customerListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="customerListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="customerListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 设置支付方式 -->
  <SetPaymentType
    ref="setPaymentTypeRef"
    @on-set-payment-type="saveSetPaymentType"
  />
</template>
<script lang="ts" setup>
import { Search, RefreshRight, Setting } from "@element-plus/icons-vue";
import {
  usePaymentTypeList,
  usePaymentTypeListModle
} from "@/composables/paymentType/usePaymentTypeList";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import { VxeBasicTable } from "@/components/VxeTable";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import SetPaymentType from "./setPaymentType.vue";
import { deal_FindGetItemName } from "@/utils/dealFindData";

const { customerListGridOptions } = usePaymentTypeListModle();
// 初始化表格高度
useInitTableHeight(customerListGridOptions, 560);
const {
  searchFormRef,
  customerListParams,
  customerListState,
  branchCompanyCustomers,
  setPaymentTypeRef,
  paymentTypeTableRef,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  hanleSetPaymentType,
  saveSetPaymentType,
  hanleBatchSetPayment,
  storePersonnel,
  getShowSalesmanUser,
  accountPeriodTypeList,
  multiCustomerNameRef,
  changeCustomerName,
  focusCustomerName,
  afterEnterCustomerName,
  confirmMultiCustomerName,
  hanlClearCustomerNameList
} = usePaymentTypeList(customerListGridOptions);
</script>
<style lang="scss" scoped>
.customer-list {
  .customer-list-search {
    width: 208px;
    margin-right: 11px;
  }
  .customer-flag-search {
    width: 158px;
    margin-right: 11px; 
  }
}
</style>
