<template>
    <common-table
        ref="pageRef"
        :pageConfig="pageConfig"
        :columns="columns"
        :tools="false"
        :bodyStyle="{ padding: 0 }"
    />
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';

    defineOptions({ name: 'AccountChangeLog' });

    const props = defineProps({
        row: {
            type: Object,
            default() {
                return {};
            }
        }
    });
    /** 页面组件实例 */
    const pageRef = ref(null);

    const pageConfig = reactive({
        fileName: '扫描记录',
        cacheKey: 'scanLogTable'
    });

    watch(
        () => props.row,
        (row) => {
            if (!row || (row && !row.id)) return;
            pageConfig.pageUrl = `/user/userScanLog/getUserScanLogList/${row.id}`;
            pageRef.value?.reload();
        },
        {
            immediate: true,
            deep: true
        }
    );

    /** 表格列配置 */
    const columns = ref([
        { label: '序号', type: 'index', align: 'center', width: 60 },
        { label: 'ISBN', prop: 'isbn', align: 'center' },
        { label: '商品名称', prop: 'bookName', align: 'center' },
        { label: '扫描次数', prop: 'scanTimes', align: 'center' },
        { label: '扫描时间', prop: 'updateTime', align: 'center' }
    ]);

    //刷新表格
    function reload(where) {
        pageRef.value?.reload(where);
    }
</script>
