<!-- 操作日志弹窗 -->
<template>
    <ele-modal :width="800" v-model="visible" title="操作日志">
        <ele-data-table
            ref="tableRef"
            class="flex-1"
            row-key="id"
            :columns="columns"
            :data="dataList"
        />

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

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import request from '@/utils/request';

    const visible = defineModel({ type: Boolean });
    const dataList = ref([]);
    const tableRef = ref();

    const handleCancel = () => {
        visible.value = false;
    };

    const handleOpen = (row) => {
        visible.value = true;
        nextTick(() => {
            fetchLog(row.isbn);
        });
    };

    function fetchLog(isbn) {
        request
            .get('/book/bookInfo/getBookTagChangeLog', { params: { isbn } })
            .then((res) => {
                dataList.value = res.data?.data || [];
            });
    }

    const columns = reactive([
        { label: '操作员', prop: 'sysUserName', width: 120 },
        { label: '操作内容', prop: 'content' },
        { label: '操作时间', prop: 'createTime', width: 180 }
    ]);

    defineExpose({
        handleOpen
    });
</script>
