<!-- 
  TODO 财务 / 财务应付明细界面
 -->
<template>
  <el-main class="financial-billdetail-list">
    <el-form
      ref="financialBillDetailListRef"
      :model="financialBillDetailListParams"
      inline
    >
      <el-form-item
        prop="feeItemCategoryId"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialBillDetailListParams.feeItemCategoryId"
          :filterable="false"
          clearable
          :options="storeFeesetList.getFeeItemCategoryList"
          placeholder="费项类型"
        />
      </el-form-item>
      <el-form-item
        prop="stakeholder"
        class="financial-search"
      >
        <BaseSelect
          v-model:modelValue="financialBillDetailListParams.stakeholder"
          :filterable="false"
          clearable
          :options="companyEntityTypeList"
          placeholder="所属主体"
        />
      </el-form-item>
      <el-form-item
        prop="providerId"
        class="financial-search"
      >
        <BaseSelectV2
          v-model:modelValue="financialBillDetailListParams.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="financialBillDetailListParams.billCodeType"
          :filterable="false"
          clearable
          :options="storeFinancialType.getBillCodeTypeList"
          placeholder="单号类型"
        />
      </el-form-item>
      <el-form-item
        prop="billCode"
        class="financial-search"
      >
        <el-input
          v-model="financialBillDetailListParams.billCode"
          clearable
          placeholder="单号"
        />
      </el-form-item>
      <el-form-item
        prop="billTime"
        class="financial-search"
      >
        <el-date-picker
          v-model="financialBillDetailListParams.billTime"
          type="date"
          placeholder="账单时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          :loading="financialBillDetailListState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          class="reset-btn"
          :icon="RefreshRight"
          :loading="financialBillDetailListState.loading"
          @click="resetBtn"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <VxeBasicTable
      v-bind="financialBillDetailListOptions"
      ref="financialBillDetailListTableRef"
    >
      <!-- 账目类型 -->
      <template #accountType="{ row }">
        {{
          deal_FindItemName(
            Number(row.accountType),
            storeFinancialType.getAccountTypeList
          )
        }}
      </template>
      <!-- 分组编号 -->
      <template #groupCode>
        <!-- v-show="row.groupId" -->
        <div>
          分组编号
          <el-tooltip
            placement="top"
          >
            <template #content>
              提单号+同组数量（例：xxxxxxx+5）
            </template>
            <el-button
              type="info"
              :icon="QuestionFilled"
              link
            />
          </el-tooltip>
        </div>
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="financialBillDetailActionOptions"
          :disabled-arr="financialBillDetailListState.disabledArr"
          @click-change="handleClickChange"
          @visible-change="changeVisibleChange($event, row)"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="financialBillDetailListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="financialBillDetailListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="financialBillDetailListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 新增或编辑财务应付明细 -->
  <FinancialBillDetailSet
    ref="financialBillDetailSetRef"
    @save-confirm="hanleSaveConfirm"
  />
  <!-- 预设参考 -->
  <LadingBillMoneyList
    ref="ladingBillMoneyListRef"
    :is-show-search="false"
  />
</template>
<script lang="ts" setup name="financialBillDetailList">
import { Search, RefreshRight, QuestionFilled } 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 { useFinancialBillDetailList } from "@/composables/financial/financialBillDetailList/useFinancialBillDetailList";
import { useFinancialBillDetailListModel } from "@/composables/financial/financialBillDetailList/useFinancialBillDetailListModel";
import FinancialBillDetailSet from "./financialBillDetailSet.vue";
import LadingBillMoneyList from "@/views/lading/ladingBillMoneyList.vue";
import { deal_FindItemName } from "@/utils/dealFindData";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";

const { financialBillDetailListOptions, financialBillDetailActionOptions } =
  useFinancialBillDetailListModel();
//   初始化表格高度
useInitTableHeight(financialBillDetailListOptions);
const {
  financialBillDetailListState,
  financialBillDetailListRef,
  financialBillDetailListTableRef,
  financialBillDetailSetRef,
  ladingBillMoneyListRef,
  financialBillDetailListParams,
  sizeChange,
  currentChange,
  searchBtn,
  resetBtn,
  handleClickChange,
  changeVisibleChange,
  hanleSaveConfirm,
  storeFeesetList,
  storeFinancialType,
  allProvidersList,
  companyEntityTypeList
} = useFinancialBillDetailList(financialBillDetailListOptions);
</script>
<style lang="scss" scoped>
.financial-billdetail-list {
  .financial-search {
    width: 156px;
    margin-right: 11px;
  }
  @media screen and (min-width: 1580px) {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
