<template>
    <ele-page flex-table :bodyStyle="{ padding: 0 }">
        <common-table
            ref="tableRef"
            :columns="columns"
            :page-config="pageConfig"
            :bodyStyle="{ padding: 0 }"
        >
            <template #toolbar>
                <page-search @search="reload" />
            </template>

            <template #orderTime="{ row }">
                {{ row.orderTime }}
            </template>
            <template #action="{ row }">
                <el-button link type="primary" @click="handleViewHelp(row)">
                    查看助力
                </el-button>
            </template>
        </common-table>

        <ShareInfo ref="shareInfoRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { ElMessage } from 'element-plus';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/PageSearch.vue';
    import ShareInfo from './components/ShareInfo.vue';

    defineOptions({ name: 'ShareDiscountDataList' });

    const tableRef = ref(null);
    const shareInfoRef = ref(null);

    const pageConfig = reactive({
        pageUrl: '/activity/activityReduceInfo/reduceOrderList',
        fileName: '降价订单列表',
        cacheKey: 'reduceOrderListTable',
        rowKey: 'orderId'
    });

    const columns = ref([
        { label: '用户ID', prop: 'userId', minWidth: 120, align: 'center' },
        { label: '用户昵称', prop: 'nickName', minWidth: 150, align: 'center' },
        { label: '订单ID', prop: 'orderId', minWidth: 150, align: 'center' },
        {
            label: '参与时间',
            prop: 'orderTime',
            minWidth: 160,
            align: 'center',
            slot: 'orderTime'
        },
        {
            label: '订单总本数',
            prop: 'totalNum',
            minWidth: 120,
            align: 'center'
        },
        {
            label: '降价次数',
            prop: 'reduceNum',
            minWidth: 100,
            align: 'center'
        },
        {
            label: '订单总金额',
            prop: 'totalMoney',
            minWidth: 120,
            align: 'center'
        },
        {
            label: '降价金额',
            prop: 'reduceMoney',
            minWidth: 120,
            align: 'center'
        },
        {
            label: '操作',
            slot: 'action',
            width: 120,
            fixed: 'right',
            align: 'center'
        }
    ]);

    const reload = (where) => {
        // 构造 param.xxx 格式的查询参数
        const params = {};
        if (where) {
            Object.keys(where).forEach((key) => {
                if (
                    where[key] !== null &&
                    where[key] !== undefined &&
                    where[key] !== ''
                ) {
                    params[`param.${key}`] = where[key];
                }
            });
        }
        tableRef.value?.reload({ page: 1, where: params });
    };

    const handleViewHelp = (row) => {
        shareInfoRef.value?.handleOpen(row);
    };
</script>
