<template>
    <ele-modal v-model="visible" title="操作日志" width="800px">
        <ele-data-table
            :data="logData"
            :columns="logColumns"
            :border="true"
            :pagination="false"
            :height="450"
        />
    </ele-modal>
</template>

<script setup>
    import { ref, defineExpose } from 'vue';
    import request from '@/utils/request';
    import { ElMessage } from 'element-plus';

    const visible = ref(false);
    const logData = ref([]);

    const logColumns = [
        { label: '操作名称', prop: 'operator', align: 'center', width: 120 },
        {
            label: '操作人',
            prop: 'operatorUserName',
            align: 'center',
            width: 120
        },
        { label: '操作内容', prop: 'content', align: 'center', minWidth: 200 },
        { label: '操作时间', prop: 'createTime', align: 'center', width: 180 }
    ];

    /**
     * 打开日志弹窗
     * @param {Object} row 记录行数据
     */
    const open = async (row) => {
        visible.value = true;
        logData.value = [];
        try {
            const res = await request.get(
                `/order/orderCompensationLog/operatorLog/${row.id}`
            );
            if (res.data.code === 200) {
                logData.value = res.data.data || [];
            } else {
                ElMessage.error(res.data.msg || '获取操作日志失败');
            }
        } catch (error) {
            console.error('获取操作日志失败:', error);
            ElMessage.error('获取操作日志失败');
        }
    };

    /**
     * 关闭弹窗
     */
    const close = () => {
        visible.value = false;
        logData.value = [];
    };

    defineExpose({
        open,
        close
    });
</script>
