<!-- 编辑弹窗 -->
<template>
    <ele-modal form :width="900" 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 handleCancel = () => {
        visible.value = false;
    };

    /** 弹窗打开事件 */
    let dataList = ref([]);
    const tableRef = ref();
    const handleOpen = (row) => {
        visible.value = true;
        nextTick(() => {
            fetchPage(row.orderId);
        });
    };

    function fetchPage(orderId) {
        request
            .get(`/activity/activityUpsellInfo/orderHelpList/${orderId}`)
            .then((res) => {
                if (res.data && res.data.code == 200) {
                    dataList.value = res.data.data;
                } else {
                    dataList.value = [];
                }
            });
    }

    // 表格数据
    const columns = reactive([
        { label: '用户UID', prop: 'userId' },
        { label: '用户昵称', prop: 'nickName', minWidth: 120 },
        {
            label: '是否下单',
            prop: 'orderStatus',
            formatter: (row) => (row.orderStatus === 1 ? '是' : '否')
        },
        { label: '订单总本数', prop: 'orderTotalNum' },
        { label: '订单总金额', prop: 'orderTotalMoney' },
        { label: '加价金额', prop: 'orderTotalUpsellMoney' }
    ]);

    defineExpose({
        handleOpen
    });
</script>
