<!-- 
  提单费用列表
 -->
<template>
  <SysDialog
    class="lading-money-list"
    :visible="dialog.visible"
    v-bind="getBindValue"
    @onClose="onclose"
  >
    <template #content>
      <div>
        <!-- 搜索 -->
        <div v-show="isShowSearch">
          <el-form
            ref="ladingBillDetailRef"
            :model="ladingBillDetailParams"
            class="lading-bill-detail"
            inline
          >
            <el-form-item
              prop="transactionNumber"
              class="item-search"
            >
              <BaseSelect
                v-model:modelValue="ladingBillDetailParams.feeSetType"
                :clearable="true"
                :filterable="false"
                :options="selectfeeSetTypeList"
                placeholder="结算类型"
              />
            </el-form-item>
            <el-form-item
              prop="transactionNumber"
              class="item-search"
            >
              <BaseSelect
                v-model:modelValue="ladingBillDetailParams.feeItemCategory"
                :clearable="true"
                :filterable="false"
                :options="storeFeesetList.getFeeItemCategoryList"
                placeholder="费项类型"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                :icon="Search"
                plain
                @click="searchBtn"
              >
                搜索
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 列表 -->
        <VxeBasicTable v-bind="ladingBillMoneyListOptions">
          <template #default_actions="{ row }">
            <el-button
              type="primary"
              :icon="View"
              class="width-100"
              link
              :loading="ladingBillDetailState.loading"
              @click="hanleViewDetail(row)"
            >
              明细
            </el-button>
          </template>
        </VxeBasicTable>
      </div>
    </template>
    <template #defineFooter>
      <span class="dialog-footer">
        <el-button
          @click="onclose"
        >关闭</el-button>
      </span>
    </template>
  </SysDialog>
  <!-- 提单费用明细列表 -->
  <LadingBillMoneyDetailList ref="ladingBillMoneyDetailListRef" />
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { VxeBasicTable } from '@/components/VxeTable';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { useLadingBillMoneyList } from '@/composables/lading/useLadingBillMoneyDetailList';
import { useLadingBillMoneyListModel } from '@/composables/lading/useLadingListModel';
import { Search, View } from "@element-plus/icons-vue";
import LadingBillMoneyDetailList from './ladingBillMoneyDetailList.vue';
import { reactive } from 'vue';

interface Props {
  /**
   * 是否显示搜索内容
   */
  isShowSearch: boolean
}
withDefaults(defineProps<Props>(), {
  isShowSearch: true,
})
// 弹框一些配置
const getBindValue = reactive({
    title: "提单费用列表",
    width: "86%",
    top: "9vh",
    height: 0,
    isFooter: true
});
//弹框属性
const { dialog, onClose, onShow } = useDialog();
const { ladingBillMoneyListOptions } = useLadingBillMoneyListModel()
const {
    ladingBillDetailRef,
    ladingBillDetailParams,
    ladingBillMoneyDetailListRef,
    ladingBillDetailState,
    show,
    onclose,
    searchBtn,
    hanleViewDetail,
    storeFeesetList,
    selectfeeSetTypeList
} = useLadingBillMoneyList(onClose, onShow, ladingBillMoneyListOptions)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.lading-money-list {
    .lading-bill-detail {
        .lading-search {
            width: 142px;
            margin-right: 11px;
        }
    }
}
</style>