<!-- 
    TODO 财务 / 核账结果界面
 -->
<template>
  <el-main class="financial-verify-list">
    <el-form
      ref="financialVerifyListFormRef"
      :model="financialVerifyListParams"
      inline
    >
      <el-form-item
        prop="billCode"
        class="financial-search"
      >
        <el-input
          v-model="financialVerifyListParams.billCode"
          placeholder="账单编号"
        />
      </el-form-item>
      <el-form-item
        prop="providerId"
        class="financial-search"
      >
        <BaseSelectV2
          v-model:modelValue="financialVerifyListParams.providerId"
          clearable
          :options="allProvidersList"
          popper-class="providerId-w"
          :height="272"
          placeholder="渠道商"
        />
      </el-form-item>
      <el-form-item
        prop="billCodeType"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialVerifyListParams.billCodeType"
          :filterable="false"
          clearable
          :options="storeFinancialType.getBillCodeTypeList"
          placeholder="单号类型"
        />
      </el-form-item>
      <el-form-item
        prop="code"
        class="financial-search"
      >
        <el-input
          v-model="financialVerifyListParams.code"
          placeholder="单号"
        />
      </el-form-item>
      <el-form-item
        prop="isDifference"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialVerifyListParams.isDifference"
          clearable
          :options="storeFinancialType.getDifferenceTypeList"
          placeholder="对账结果"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="financialVerifyListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          class="reset-btn"
          :icon="RefreshRight"
          :loading="financialVerifyListState.loading"
          @click="resetBtn"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="financialVerifyListOptions"
      ref="financialVerifyListTableRef"
    >
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="financialVerifyListActionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="financialVerifyListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="financialVerifyListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="financialVerifyListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
    <!-- 费用明细 -->
    <FinancialVerifyCategoryList ref="financialVerifyCategoryListRef" />
  </el-main>
</template>
<script lang="ts" setup name="financialVerifyList">
import { Search, RefreshRight } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import BaseSelectV2 from "@/components/QuerySelect/BaseSelectV2.vue";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { VxeBasicTable } from "@/components/VxeTable";
import { useFinancialVerifyListModel } from "@/composables/financial/financialVerifyList/useFinancialVerifyListModel";
import { useFinancialVerifyList } from "@/composables/financial/financialVerifyList/useFinancialVerifyList";
import FinancialVerifyCategoryList from "./financialVerifyCategoryList.vue";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";

const { financialVerifyListOptions, financialVerifyListActionOptions } =
  useFinancialVerifyListModel();
//   初始化表格高度
useInitTableHeight(financialVerifyListOptions);
const {
  financialVerifyListState,
  financialVerifyListParams,
  financialVerifyListFormRef,
  financialVerifyCategoryListRef,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  handleClickChange,
  storeFinancialType,
  allProvidersList
} = useFinancialVerifyList(financialVerifyListOptions);
</script>
<style lang="scss" scoped>
.financial-verify-list {
  .financial-search {
    width: 156px;
    margin-right: 11px;
  }

  @media screen and (min-width: 1580px) {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
