<template>
    <ele-modal
        form
        :width="1200"
        v-model="visible"
        title="佣金获取详情"
        @open="handleOpen"
        :body-style="{ padding: '0px 10px' }"
    >
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        />
        <template #footer>
            <el-button @click="handleCancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

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

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

    const pageRef = ref(null);

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

    /** 表格列配置 */
    const columns = ref([
        { label: 'UID', prop: 'beInviteUserId', align: 'center' },
        { label: '昵称', prop: 'nickName', align: 'center' },
        { label: '联系方式', prop: 'mobile', align: 'center' },
        { label: '邀请时间', prop: 'createTime', align: 'center', width: 180 },
        {
            label: '获得佣金',
            prop: 'settlementMoney',
            align: 'center',
            formatter: (row) => row.settlementMoney || '--'
        }
    ]);

    const pageConfig = reactive({
        pageUrl: '/user/userInviteLog/myInviteLog',
        fileName: '佣金详情',
        cacheKey: 'commission-detail-table',
        params: {
            inviteUserId: null
        }
    });

    // 打开弹窗并请求数据
    function handleOpen(row) {
        console.log(row);
        if (row && row.inviteUserId) {
            pageConfig.params.inviteUserId = row.inviteUserId;
            console.log(pageConfig.params);

            visible.value = true;
            nextTick(() => {
                pageRef.value?.reload();
            });
        }
    }

    defineExpose({
        handleOpen
    });
</script>
