<!-- 编辑弹窗 -->
<template>
    <ele-modal :width="1080" v-model="visible" title="订单日志">
        <ele-data-table :data="orderLog" :columns="columns">
            <template #status="{ row }">
                <el-tag type="danger" v-if="row.cancelStatus == 1"
                    >已取消</el-tag
                >
                <dict-data
                    v-else
                    code="order_status"
                    type="text"
                    :model-value="row.status"
                />
            </template>
        </ele-data-table>

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

<script setup>
    import { ref, reactive, nextTick, getCurrentInstance } from 'vue';

    import { pagePosts } from '@/api/system/post';

    const props = defineProps({
        type: {
            type: String,
            default: 'order'
        }
    });

    let { proxy } = getCurrentInstance();
    /** 弹窗是否打开 */
    const visible = ref(false);

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

    /** 弹窗打开事件 */
    const handleOpen = (orderId) => {
        if (orderId) {
            visible.value = true;
            props.type == 'refund'
                ? getRefundOrderLog(orderId)
                : getOrderLog(orderId);
        }
    };

    // 订单日志
    const orderLog = ref([]);
    function getOrderLog(orderId) {
        proxy.$http
            .get(`/order/orderInfo/getOrderLogList?orderId=${orderId}`)
            .then((res) => {
                if (res.data.code === 200) {
                    orderLog.value = res.data.data;
                } else {
                    EleMessage.error(res.data.msg || '获取订单日志失败');
                }
            });
    }
    //退回订单日志
    function getRefundOrderLog(orderId) {
        proxy.$http
            .get(
                `/order/orderInfo/refund/getOrderLogList?refundOrderId=${orderId}`
            )
            .then((res) => {
                if (res.data.code === 200) {
                    orderLog.value = res.data.data;
                } else {
                    EleMessage.error(res.data.msg || '获取订单日志失败');
                }
            });
    }

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

    const tableRef = ref(null);
    /** 表格数据源 */
    const datasource = ({ pages, where, orders }) => {
        return pagePosts({ ...where, ...orders, ...pages });
    };

    /** 搜索 */
    const reload = (where) => {
        tableRef.value?.reload?.({ page: 1, where });
    };

    defineExpose({
        handleOpen
    });
</script>
