<!-- 编辑弹窗 -->
<template>
    <ele-modal form :width="800" v-model="visible" title="变动记录">
        <SimpleTable
            ref="tableRef"
            style="width: 100%"
            :columns="columns"
            :fetchPage="fetchPage"
            :formaterData="formaterData"
        >
            <template #changeValue="{ row }">
                <div class="flex flex-col">
                    <el-text>变动前：{{ row.oldValue || '-' }}</el-text>
                    <el-text>变动后：{{ row.newValue || '-' }}</el-text>
                </div>
            </template>
        </SimpleTable>

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

<script setup>
    import { ref, reactive, nextTick } from 'vue';
    import { Flag, ChatDotSquare } from '@element-plus/icons-vue';
    import SimpleTable from '@/components/CommonPage/SimpleTable.vue';
    import request from '@/utils/request';

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

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

    /** 弹窗打开事件 */
    let bookId = ref();
    const tableRef = ref();
    const handleOpen = (row) => {
        visible.value = true;
        bookId.value = row.id;
        nextTick(() => {
            tableRef.value?.reload();
        });
    };

    function formaterData(data) {
        return { rows: data.data };
    }

    function fetchPage(params) {
        return request.get('/book/bookInfo/getChangeLog/' + bookId.value, {
            params
        });
    }

    // 表格数据
    const columns = reactive([
        { label: '变动属性', prop: 'changeAttribute', width: 100 },
        { label: '变动值', prop: 'changeValue', slot: 'changeValue' },
        { label: '操作员', prop: 'createName', width: 100 },
        { label: '变动时间', prop: 'createTime', width: 180 }
    ]);

    defineExpose({
        handleOpen
    });
</script>
