<!-- 
  TODO 成本管理 / 提单列表
 -->
<template>
  <el-main class="lading-bill-list">
    <el-form
      ref="ladingBillListRef"
      :model="ladingBillListParams"
      class="ladingB-bill-list"
      inline
    >
      <ExpansionContainer
        :row-col="{ spanLeft: 16, spanRight: 10 }"
      >
        <template #content>
          <el-form-item
            prop="waybillNumber"
            class="lading-search"
          >
            <el-input
              v-model="ladingBillListParams.waybillNumber"
              placeholder="提单号"
            />
          </el-form-item>
          <el-form-item
            prop="bookingNumber"
            class="lading-search"
          >
            <el-input
              v-model="ladingBillListParams.bookingNumber"
              placeholder="订舱号"
            />
          </el-form-item>
          <el-form-item
            prop="customerId"
            class="lading-search"
          >
            <BaseSelectV2
              v-model:modelValue="ladingBillListParams.customerId"
              clearable
              :options="customertList"
              popper-class="customerId-w"
              :height="272"
              placeholder="客户"
            />
          </el-form-item>
          <el-form-item
            prop="bookingAgentId"
            class="lading-search"
          >
            <BaseSelectV2
              v-model:modelValue="ladingBillListParams.bookingAgentId"
              clearable
              :options="allProvidersList"
              popper-class="booking-agentId-w"
              :height="272"
              placeholder="订舱代理"
            />
          </el-form-item>
          <el-form-item
            prop="airlinesId"
            class="lading-search"
          >
            <BaseSelect
              v-model:modelValue="ladingBillListParams.airlinesId"
              clearable
              :filterable="false"
              :options="airCompanyList"
              placeholder="航司"
            />
          </el-form-item>
          <el-form-item
            prop="salesmanId"
            class="lading-search"
          >
            <BaseSelectV2
              v-model:modelValue="ladingBillListParams.salesmanId"
              clearable
              :options="salesmanUsesList"
              :height="272"
              popper-class="salesmanId-w"
              placeholder="业务员"
            />
          </el-form-item>
          <el-form-item
            prop="operateState"
            class="lading-search"
          >
            <BaseSelect
              v-model:modelValue="ladingBillListParams.operateState"
              :clearable="true"
              :filterable="false"
              :options="storeStateType.getOperateStateList"
              placeholder="操作状态"
            />
          </el-form-item>
          <el-form-item
            prop="bookingState"
            class="lading-search"
          >
            <BaseSelect
              v-model:modelValue="ladingBillListParams.bookingState"
              :clearable="true"
              :filterable="false"
              :options="storeStateType.getBookingStateList"
              placeholder="订舱状态"
            />
          </el-form-item>
          <el-form-item
            prop="ladingBillDateType"
            class="lading-search"
          >
            <BaseSelect
              v-model:modelValue="ladingBillListParams.ladingBillDateType"
              :clearable="true"
              :filterable="false"
              :options="storeStateType.getLadingBillDateTypeList"
              placeholder="时间类型"
            />
          </el-form-item>
          <el-form-item class="lading-search starting-time-item">
            <el-date-picker
              v-model="loadingBillState.dateArr"
              :disabled-date="isSelectDisabled"
              type="daterange"
              popper-class="myDatePicker"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              @calendar-change="selectCalendar"
            />
          </el-form-item>
          <el-form-item
            prop="stakeholder"
            class="lading-search"
          >
            <BaseSelect
              v-model:modelValue="ladingBillListParams.stakeholder"
              :clearable="true"
              :filterable="false"
              :options="companyEntityTypeList"
              placeholder="主体"
            />
          </el-form-item>
        </template>
        <template #button>
          <el-button
            :icon="Search"
            :loading="loadingBillState.loading"
            @click="searchBtn"
          >
            搜索
          </el-button>
          <el-button
            class="reset-btn"
            :icon="RefreshRight"
            :loading="loadingBillState.loading"
            @click="resetBtn"
          >
            重置
          </el-button>
          <el-button
            v-permission="['sys:ladingBillMain:add']"
            type="success"
            :icon="Plus"
            plain
            @click="hanleAdd"
          >
            新增
          </el-button>
          <DropDownButtons
            class="search-buttons"
            placeholder="批量操作"
            :model-value="loadingBillState"
            :action-options="searchActionOptions"
            @click-change="hanleChangeSearch"
          />
        </template>
      </ExpansionContainer>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      v-bind="ladingListOptions"
      ref="ladingListTableRef"
    >
      <!-- 订舱状态 -->
      <template #default_bookingState="{ row }">
        {{ deal_FindItemName(row.bookingState, storeStateType.getBookingStateList) }}
      </template>
      <!-- 操作状态 -->
      <template #default_operationalState="{ row }">
        {{ deal_FindItemName(row.operationalState, storeStateType.getOperateStateList) }}
      </template>
      <!-- 应收状态 -->
      <template #default_receivableState="{ row }">
        {{ deal_FindItemName(row.receivableState, storeStateType.getReceivableStateList) }}
      </template>
      <!-- 应付状态 -->
      <template #default_payableState="{ row }">
        {{ deal_FindItemName(row.payableState, storeStateType.getPayStateList) }}
      </template>
      <!-- 操作 -->
      <template #actions="{ row }">
        <DropDownButtons
          :model-value="row"
          :action-options="actionOptions"
          @click-change="handleClickChange"
        />
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="ladingBillListParams.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="ladingBillListParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="ladingBillListParams.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
  <!-- 提单类型 -->
  <LadingBillSet
    ref="ladingBillSetRef"
    @save-confirm="hanleSaveConfirm"
  />
  <!-- 提单费用设置 -->
  <LadingBillMoneySet
    ref="ladingBillMoneySetRef"
    @save-bill-set="hanleSaveBillSet"
    @save-fee-calculate="hanleSaveFeeCalculate"
  />
  <!-- 提单费用试算结果 -->
  <LillMoneyCountResult
    ref="lillMoneyCountResultRef"
    :lading-bill-fee-query-resul="loadingBillState.ladingCostTrialList"
    @save-base-fee="hanleSaveBaseFee"
  />
  <!-- 提单费用列表 -->
  <LadingBillMoneyList ref="ladingBillMoneyListRef" />
  <!-- 提单批量更新状态 -->
  <LadingBillStateUpdate
    ref="ladingBillStateUpdateRef"
    @save-update="hanleSaveUpdate"
  />
  <!-- 提单账单预览 -->
  <LadingPreviewBill
    ref="ladingPreviewBillRef"
    :customer-bill-data="loadingBillState.customerBillData"
  />
  <!-- 提单导入 -->
  <LadingBillImport ref="ladingBillImportRef" />
</template>
<script lang="ts" setup name="ladingBillList">
import { VxeBasicTable } from '@/components/VxeTable';
import { useLadingList } from '@/composables/lading/useLadingList';
import { useLadingListModel } from '@/composables/lading/useLadingListModel';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import BaseSelectV2 from '@/components/QuerySelect/BaseSelectV2.vue';
import DropDownButtons from '@/components/DropDownButtons/index.vue';
import { useTimeRange } from '@/hooks/useTimeRange';
import { Search, RefreshRight, Plus } from "@element-plus/icons-vue";
import ExpansionContainer from '@/components/ExpansionContainer/ExpansionContainer.vue';
import LadingBillSet from './ladingBillSet.vue';
import LadingBillMoneySet from './ladingBillMoneySet.vue';
import LadingBillImport from './ladingBillImport.vue';
import LadingBillStateUpdate from './ladingBillStateUpdate.vue';
import LillMoneyCountResult from './billMoneyCountResult.vue';
import LadingBillMoneyList from './ladingBillMoneyList.vue';
import LadingPreviewBill from './ladingPreviewBill.vue';
import { deal_FindItemName } from '@/utils/dealFindData';

const { ladingListOptions, actionOptions, searchActionOptions } = useLadingListModel()
const {
  ladingListTableRef,
  ladingBillListRef,
  ladingBillSetRef,
  ladingBillImportRef,
  ladingBillMoneySetRef,
  ladingBillStateUpdateRef,
  lillMoneyCountResultRef,
  ladingBillMoneyListRef,
  ladingPreviewBillRef,
  ladingBillListParams,
  loadingBillState,
  handleClickChange,
  hanleChangeSearch,
  searchBtn,
  resetBtn,
  hanleAdd,
  sizeChange,
  currentChange,
  hanleSaveConfirm,
  hanleSaveBillSet,
  hanleSaveFeeCalculate,
  hanleSaveBaseFee,
  hanleSaveUpdate,
  customertList,
  allProvidersList,
  salesmanUsesList,
  storeStateType,
  companyEntityTypeList,
  airCompanyList
} = useLadingList(ladingListOptions)
// daterange 时间范围
const { isSelectDisabled, selectCalendar } = useTimeRange()
</script>
<style lang="scss" scoped>
.lading-bill-list {
  .ladingB-bill-list {
    margin-bottom: 10px;

    .lading-search {
      width: 142px;
      margin-right: 11px;
    }

    .search-buttons {
      width: 125px;
      margin-left: 12px;
    }
  }
}
</style>