<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 pageConfig = reactive({
        pageUrl: '',
        fileName: '余额变动',
        cacheKey: 'accountChangeLogTable'
    });
    /** 页面组件实例 */
    const pageRef = ref(null);

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

    /** 表格列配置 */
    const columns = ref([
        { label: '变动记录', prop: 'changeTypeName', align: 'center' },
        { label: '余额变化', prop: 'changeMoney', align: 'center' },
        { label: '变化后余额', prop: 'afterMoney', align: 'center' },
        { label: '发生时间', prop: 'createTime', align: 'center' }
    ]);

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