<!-- 
  TODO 客户业务 / 客户账期列表
 -->
<template>
  <el-main class="account-period-list">
    <!-- 搜索栏 -->
    <el-form
      ref="accountPeriodFormRef"
      :model="accountPeriodListParams"
      label-width="80px"
      :inline="true"
    >
      <el-form-item
        prop="customerId"
        class="account-search"
      >
        <BaseSelect
          v-model:modelValue="accountPeriodListParams.customerId"
          :clearable="true"
          :options="customertList"
          placeholder="客户"
        />
      </el-form-item>
      <el-form-item
        prop="accountPeriod"
        class="account-search"
      >
        <BaseSelect
          v-model:modelValue="accountPeriodListParams.accountPeriod"
          :options="accountPeriodTypeList"
          :clearable="true"
          placeholder="账期类型类型"
        />
      </el-form-item>
      <el-form-item
        prop="deleteFlag"
        class="account-search"
      >
        <BaseSelect
          v-model:modelValue="accountPeriodListParams.deleteFlag"
          :options="accountPeriodListState.deleteFlagList"
          :clearable="true"
          placeholder="状态"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="accountPeriodListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="accountPeriodListState.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:accountPeriod:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
        <el-button
          v-permission="['sys:accountPeriod:edit']"
          color="#2259E5"
          :icon="Edit"
          @click="batchModification"
        >
          批量修改
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="accountPeriodGridOptions"
      ref="accountPeriodTableRef"
    >
      <template #deleteFlag="{ row }">
        <el-tag
          :type="row.deleteFlag ? 'info' : 'success'"
        >
          {{ row.deleteFlag ? "停用" : "启用" }}
        </el-tag>
      </template>
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="actionOptions"
          @click-change="hanleChangeAction"
        >
          <template #islabel="{ item }">
            {{ !row.deleteFlag ? item.islabel : item.label }}
          </template>
        </DropDownButtons>
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="accountPeriodListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="accountPeriodListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="accountPeriodListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 新增或编辑账期 -->
  <AccountPeriodEdit
    ref="accountPeriodEditRef"
    :customert-list="customertList"
    :account-period-type-list="accountPeriodTypeList"
    @save-account-period="hanleSaveAccountPeriod"
  />
  <!-- 批量修改额度 -->
  <AccountPeriodLimitEdit
    ref="accountPeriodLimitEditRef"
    :account-period-type-list="accountPeriodTypeList"
    @save-account-period-limit="hanleAccountPeriodLimit"
  />
</template>
<script lang="ts" setup name="accountPeriodList">
import { Search, RefreshRight, Plus, Edit } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { useAccountPeriodList } from "@/composables/accountPeriod/useAccountPeriodList";
import { VxeBasicTable } from "@/components/VxeTable";
import { useAccountPeriodModel } from "@/composables/accountPeriod/useAccountPeriodModel";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import AccountPeriodEdit from './accountPeriodEdit.vue';
import AccountPeriodLimitEdit from './accountPeriodLimitEdit.vue';

const { accountPeriodTableRef, accountPeriodGridOptions, actionOptions } =
  useAccountPeriodModel();
// 初始化表格高度
useInitTableHeight(accountPeriodGridOptions);
const {
  accountPeriodListState,
  accountPeriodListParams,
  accountPeriodFormRef,
  accountPeriodEditRef,
  accountPeriodLimitEditRef,
  customertList,
  accountPeriodTypeList,
  searchBtn,
  resetBtn,
  addBtn,
  batchModification,
  sizeChange,
  currentChange,
  hanleChangeAction,
  hanleSaveAccountPeriod,
  hanleAccountPeriodLimit
} = useAccountPeriodList(accountPeriodGridOptions);
</script>
<style lang="scss" scoped>
.account-period-list {
  .account-search {
    width: 184px;
    margin-right: 11px;
  }
}
</style>
