<!-- 
  提单费用试算费用明细
 -->
<template>
  <SysDialog
    class="billmoney-count-resultdetail"
    :visible="dialog.visible"
    v-bind="getBindValue"
    @onClose="onclose"
  >
    <template #content>
      <VxeBasicTable v-bind="billMoneyCountResultDetailOptions" />
    </template>
    <template #defineFooter>
      <span class="dialog-footer">
        <el-button
          type="danger"
          @click="onClose"
        >关闭</el-button>
      </span>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import { BasicTableProps, VxeBasicTable } from '@/components/VxeTable';
import useDialog from "@/hooks/useDialog";
import { reactive } from 'vue';

// 弹框一些配置
const getBindValue = reactive({
  title: "提单费用试算结果",
  width: 820,
  height: 0,
  isFooter: true
});
const { dialog, onClose, onShow } = useDialog();

// 提单费用试算费用明细表格-配置
const billMoneyCountResultDetailOptions = reactive<BasicTableProps>({
  id: 'billMoneyCount_resultDetail_table',
  border: true,
  keepSource: true,
  showOverflow: true,
  height: 220,
  loading: false,
  stripe: true,
  rowConfig: { isHover: true, keyField: 'id' },
  cellStyle: { height: '38px', padding: 0 },
  columnConfig: { resizable: true },
  columns: [
    { type: "seq", title: '序号', width: 65 },
    { field: 'feeItemName', title: '费用名称', minWidth: 120 },
    { field: 'fee', title: '费用', minWidth: 90 },
    { field: 'exchangeRate', title: '汇率', minWidth: 90 },
    { field: 'oriCurrencyFee', title: '原币金额', minWidth: 120 },
    { field: 'oriCurrencyCode', title: '原币种', minWidth: 100 }
  ],
  data: []
})

// 显示/隐藏
const show = (row) => {
  billMoneyCountResultDetailOptions.data = row.feeItemDtoList
  onShow()
}
const onclose = () => {
  billMoneyCountResultDetailOptions.data = []
  onClose()
}
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.billmoney-count-resultdetail {}
</style>