<!-- 
    TODO 财务 / 分摊结果-财务
 -->
<template>
  <el-main class="financial-shareList">
    <el-form
      ref="financialShareListFormRef"
      :model="financialShareListParams"
      inline
    >
      <el-form-item
        prop="billCode"
        class="financial-search"
      >
        <el-input
          v-model="financialShareListParams.billCode"
          clearable
          placeholder="账单编号"
        />
      </el-form-item>
      <el-form-item
        prop="feeItemCategory"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialShareListParams.feeItemCategory"
          :filterable="false"
          clearable
          :options="storeFeesetList.getFeeItemCategoryList"
          placeholder="费项类型"
        />
      </el-form-item>
      <el-form-item
        prop="providerId"
        class="financial-search"
      >
        <BaseSelectV2
          v-model:modelValue="financialShareListParams.providerId"
          clearable
          :options="allProvidersList"
          popper-class="booking-agentId-w"
          :height="272"
          placeholder="渠道商"
        />
      </el-form-item>
      <el-form-item
        prop="billCodeType"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialShareListParams.billCodeType"
          :filterable="false"
          clearable
          :options="storeFinancialType.getBillCodeTypeList"
          placeholder="单号类型"
        />
      </el-form-item>
      <el-form-item
        prop="code"
        class="financial-search"
      >
        <el-input
          v-model="financialShareListParams.code"
          clearable
          placeholder="单号"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="financialShareListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          class="reset-btn"
          :icon="RefreshRight"
          :loading="financialShareListState.loading"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:financialBillSummary:add']"
          type="success"
          :icon="Plus"
          plain
          @click="download"
        >
          下载
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      ref="financialShareListTableRef"
      v-bind="financialShareListOptions"
    />
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="financialShareListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="financialShareListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="financialShareListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
    <!-- 由于BaseSelectV2的样式没有生效 -->
    <BaseTest />
  </el-main>
</template>
<script lang="ts" setup name="financialShareList">
import { Search, RefreshRight, Plus } from "@element-plus/icons-vue";
import BaseSelectV2 from "@/components/QuerySelect/BaseSelectV2.vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import {
  useFinancialShareList,
  useFinancialShareListModel
} from "@/composables/financial/financialShareList/useFinancialShareList";
import BaseTest from '@/components/BaseTest/BaseTest.vue';

const { financialShareListOptions } = useFinancialShareListModel();
useInitTableHeight(financialShareListOptions);

const {
  financialShareListParams,
  financialShareListState,
  financialShareListFormRef,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  download,
  allProvidersList,
  storeFinancialType,
  storeFeesetList
} = useFinancialShareList(financialShareListOptions);
</script>
<style lang="scss" scoped>
.financial-shareList {
  .financial-search {
    width: 156px;
    margin-right: 11px;
  }
}
</style>
