// 定义触发显示按钮
<el-link @click="state.order_id = scope.row.id" style="font-size: 14px;">{{ scope.row.out_trade_no }}</el-link>

// 主页面中加载子组件
<Detail v-if="state.order_id > 0" :order_id="state.order_id" @hideDetail="hideDetail"  />

// 主页面中引入子组件页面
import Detail from './detail.vue';

// 主页面中定义关闭弹出窗口的方法
const hideDetail = () => {
    state.order_id = 0;
}

// 主页面中设置子组件样式
:deep(.ba-operate-dialog-detail){
    margin-top: 2.5vh;
    width: 95%;
    max-width: 969px;
    margin-bottom: 0;
    height: 95vh;
}

:deep(.ba-operate-dialog-detail .el-dialog__body){
    padding-bottom: 0;
    height: calc(100% - 56px);
}

// 子组件页面
<template>
    <el-dialog
        class="ba-operate-dialog ba-operate-dialog-list"
        :close-on-click-modal="false"
        :model-value="order_id > 0"
        :before-close="close"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ t('订单详情') }}
            </div>
        </template>
        <el-scrollbar class="ba-table-form-scrollbar">
            <div class="default-main ba-table-box">
                <!-- 此处编写页面内容 -->
            </div>
        </el-scrollbar>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, provide, onMounted, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { useRoute } from 'vue-router'

defineOptions({
    name: 'order/detail/index',
})
const props = defineProps(['order_id'])
const emit = defineEmits(["hideDetail"])

const { t } = useI18n()
const tableRef = ref()

const route = useRoute()

const state = reactive({
    order_id: props.order_id
});

// 关闭当前弹出窗口
const close = (done: () => void) => {
    emit("hideDetail")
    done()
}

let optButtons = defaultOptButtons([])
// 自定义一个新的按钮
let newButton: OptButton[] = [
    {
        render: 'basicButton', // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        name: 'edit',
        title: 'edit',
        text: t('编辑'),
        type: 'primary',
        class: 'btn btn-primary btn-small btn-sm ml-0 mt-5',
        icon: '',
    },{
        render: 'confirmButton',
        name: 'delete',
        title: '',
        text: t('删除'),
        type: 'danger',
        class: 'btn btn-danger ml--6 mt-5 btn-small',
        icon: '',
        popconfirm: {
            confirmButtonText: t('删除'),
            cancelButtonText: t('取消'),
            confirmButtonType: 'danger',
            title: t('确定要删除这条数据吗') + '?',
        }
    }
]

// 新按钮合入到默认的按钮数组
optButtons = newButton.concat(optButtons)
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/OrderDetail/'),
    {
        pk: 'id',
        column: [
            { label: t('No.'), prop: 'id', align: 'center', width: 70, type: 'index' },
            { label: t('分类'), prop: 'product.category.name_cn', align: 'center', width: 150 },
            { label: t('产品名'), prop: 'product.name_customer', align: 'center' },
            { label: t('规格'), prop: 'product.specification_customer', align: 'center' },
            { label: t('销售价格'), prop: 'sale_price', align: 'center', width: 120 },
            { label: t('购买价格'), prop: 'cost_price', align: 'center', width: 120 },
            { label: t('数量'), prop: 'quantity', align: 'center', width: 120 },
            { label: t('操作'), align: 'center', render: 'buttons', buttons: optButtons, width: 160 },
        ],
        dblClickNotEditColumn: ['all'],
        defaultOrder: { prop: 'id', order: 'desc'},
    },
    {
        defaultItems: { order_id: state.order_id, sale_currency: 'KRW', cost_currency: 'CNY' },
    },{

    },{
        getIndex: ({ res }: { res: ApiResponse }) => { // 查看后
        },
        postDel: ({ res }:{ res: ApiResponse }) => { // 删除后
        },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.table.filter!.order_id = state.order_id;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">

</style>