<template>
  <SysDialog
    class="customer-feetest-detail"
    :visible="dialog.visible"
    v-bind="getBindValue"
    @onClose="onClose"
  >
    <template #content>
        <BaseTable @register="registerResultDetailsTable">
        </BaseTable>
    </template>
    <template #defineFooter>
      <span class="dialog-footer">
        <el-button type="primary" @click="onClose">关闭</el-button>
      </span>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { BaseTable, useTable } from '@/components/Table';
import { BaseTableProps } from '@/components/Table/src/types';

//弹框属性
const { dialog, onClose, onShow } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
    title: "费用明细",
    width: 1080,
    isFooter: true,
    height: 0
});

// 明细
const tableFeeQueryResultDetails: BaseTableProps = reactive({
    height: 520,
    maxHeight: 520,
    border: true,
    columns: [
        { prop: "feeItemName", label: "费用名称", minWidth: 120, },
        { prop: "price", label: "单价", minWidth: 100, },
        { prop: "fee", label: "费用", minWidth: 120, },
        { prop: "exchangeRate", label: "汇率", minWidth: 120, },
        { prop: "oriCurrencyFee", label: "原币金额", minWidth: 120, },
        { prop: "oriCurrencyCode", label: "原币种", minWidth: 120, },
    ],
    dataSource: [],
});
const [registerResultDetailsTable] = useTable(tableFeeQueryResultDetails)

// 显示
const show = (list: Recordable[]) => {
  tableFeeQueryResultDetails.dataSource = list
  onShow()
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
    show
});
</script>
<style scoped>
.customer-feetest-detail {}
</style>