<!-- 订单日志弹窗 -->
<template>
    <ele-modal :width="1080" v-model="visible" title="订单日志">
        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :initLoad="false"
            height="400px"
            :body-style="{ padding: 0 }"
        >
            <template #status="{ row }">
                <dict-data
                    code="shop_order_status"
                    type="text"
                    :model-value="row.status"
                />
            </template>
        </common-table>

        <template #footer>
            <el-button type="primary" @click="handleCancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';

    /** 弹窗是否打开 */
    const visible = ref(false);
    const tableRef = ref(null);

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
    };

    /** 弹窗打开事件 */
    const handleOpen = (orderId) => {
        if (orderId) {
            visible.value = true;
            nextTick(() => {
                tableRef.value?.reload({ orderId });
            });
        }
    };

    const pageConfig = reactive({
        pageUrl: '/shop/shopOrder/getOrderLogList',
        rowKey: 'id',
        cacheKey: 'orderLogTable'
    });

    const columns = reactive([
        { type: 'index', width: 50, align: 'center' },
        { label: '订单编号', prop: 'orderId', width: 150, align: 'center' },
        {
            label: '状态',
            prop: 'status',
            slot: 'status',
            width: 160,
            align: 'center'
        },
        { label: '操作者', prop: 'createName', width: 100, align: 'center' },
        { label: '日志描述', prop: 'content', align: 'center' },
        { label: '操作时间', prop: 'createTime', width: 180, align: 'center' }
    ]);

    defineExpose({
        handleOpen
    });
</script>
