<!-- 
    TODO 财务 / 财务应付账单
 -->
<template>
  <el-main class="financial-bill-list">
    <el-form
      ref="financialBillListFormRef"
      :model="financialBillListParams"
      inline
    >
      <el-form-item
        prop="billCode"
        class="financial-search"
      >
        <el-input
          v-model="financialBillListParams.billCode"
          clearable
          placeholder="账单编号"
        />
      </el-form-item>
      <el-form-item
        prop="billName"
        class="financial-search"
      >
        <el-input
          v-model="financialBillListParams.billName"
          clearable
          placeholder="账单名称"
        />
      </el-form-item>
      <el-form-item
        prop="providerId"
        class="financial-search"
      >
        <BaseSelectV2
          v-model:modelValue="financialBillListParams.providerId"
          clearable
          :options="allProvidersList"
          popper-class="booking-agentId-w"
          :height="272"
          placeholder="渠道商"
        />
      </el-form-item>
      <el-form-item
        prop="billState"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialBillListParams.billState"
          :filterable="false"
          clearable
          :options="storeFinancialType.getFinancialBillStateList"
          placeholder="状态"
        />
      </el-form-item>
      <el-form-item
        prop="billDateType"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialBillListParams.billDateType"
          clearable
          :options="storeFinancialType.getBillDateTypeList"
          placeholder="时间类型"
        />
      </el-form-item>
      <el-form-item
        prop="beginDate"
        class="financial-search starting-time-item"
      >
        <el-date-picker
          v-model="financialBillListParams.beginDate"
          type="daterange"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="financialBillListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          class="reset-btn"
          :icon="RefreshRight"
          :loading="financialBillListState.loading"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:financialBillSummary:add']"
          type="success"
          :icon="Plus"
          plain
          @click="hanleAdd"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="financialBillListOptions"
      ref="financialBillListTableRef"
    >
      <template #billState="{ row }">
        {{
          deal_FindItemName(
            row.billState,
            storeFinancialType.getFinancialBillStateList
          )
        }}
      </template>
      <!-- 上传文件 -->
      <template #uploadFileName="{ row }">
        <span
          class="primary-color cursor"
          @click="downloadUploadFile(row)"
        >
          {{ row.uploadFileName }}
        </span>
      </template>
      <!-- 原文件 -->
      <template #originalFileName="{ row }">
        <span
          class="primary-color cursor"
          @click="downloadOriginalFile(row)"
        > 
          {{ row.originalFileName }}
        </span>
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="financialBillListActionOptions"
          :disabled-arr="financialBillListState.disabledArr"
          @click-change="handleClickChange"
          @visible-change="changeVisibleChange($event, row)"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="financialBillListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="financialBillListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="financialBillListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 账单录入 -->
  <FinancialBillSet
    ref="financialBillSetRef"
    @save-confirm="hanleSaveConfirm"
  />
  <!-- 账单分摊 -->
  <FinancialShare
    ref="financialShareRef"
    :bill-rate-list="storeFinancialType.getBillRateList"
    @save-version="hanleSaveVersion"
  />
</template>
<script lang="ts" setup name="financialBillList">
import { Search, RefreshRight, Plus } 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 { useFinancialBillList } from "@/composables/financial/financialBillList/useFinancialBillList";
import { useFinancialBillListModel } from "@/composables/financial/financialBillList/useFinancialBillListModel";
import FinancialBillSet from "./financialBillSet.vue";
import { deal_FindItemName } from "@/utils/dealFindData";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import FinancialShare from './components/financialShare.vue';

const { financialBillListOptions, financialBillListActionOptions } =
  useFinancialBillListModel();
  //   初始化表格高度
useInitTableHeight(financialBillListOptions);
const {
  financialBillListState,
  financialBillListParams,
  financialBillListFormRef,
  financialBillSetRef,
  financialShareRef,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  hanleAdd,
  downloadUploadFile,
  downloadOriginalFile,
  handleClickChange,
  changeVisibleChange,
  hanleSaveConfirm,
  hanleSaveVersion,
  storeFinancialType,
  allProvidersList
} = useFinancialBillList(financialBillListOptions);
</script>
<style lang="scss" scoped>
.financial-bill-list {
  .financial-search {
    width: 156px;
    margin-right: 11px;
  }

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