<!-- IP营销数据列表 -->
<template>
    <ele-page flex-table>
        <!-- 搜索表单 -->
        <page-search ref="searchRef" @search="handleSearch" />

        <!-- 表格 -->
        <ele-card flex-table :bodyStyle="{ padding: 0 }">
            <CommonTable
                ref="tableRef"
                :pageConfig="pageConfig"
                :columns="columns"
                :bodyStyle="{ padding: 0 }"
            >
                <template #orderId="{ row }">
                    <el-button
                        type="primary"
                        link
                        @click="handleOrderId(row)"
                        >{{ row.orderId }}</el-button
                    >
                </template>
                <!-- 操作列 -->
                <template #action="{ row }">
                    <div class="action-buttons">
                        <el-button
                            type="success"
                            link
                            v-permission="'ipMarkup:datalist:share'"
                            @click="handleShare(row)"
                        >
                            [分享信息]
                        </el-button>
                    </div>
                </template>
            </CommonTable>
        </ele-card>
        <!-- 分享信息弹窗 -->
        <share-info ref="shareRef" />
        <!-- 订单详情弹窗 -->
        <order-detail ref="orderDetailRef" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import PageSearch from './components/page-search.vue';
    import ShareInfo from './components/share-info.vue';
    import OrderDetail from '@/views/recycleOrder/components/order-detail.vue';

    // 表格实例
    const tableRef = ref(null);
    const searchRef = ref(null);
    const shareRef = ref(null);

    // 页面配置
    const pageConfig = reactive({
        pageUrl: '/activity/activityUpsellInfo/upsellOrderList',
        exportUrl: '/activity/activityUpsellInfo/export',
        fileName: 'IP营销数据列表',
        cacheKey: 'ipMarketingDataList',
        rowKey: 'id'
    });

    // 表格列配置
    const columns = ref([
        { label: '用户UID', prop: 'userId' },
        { label: '用户昵称', prop: 'nickName', minWidth: 120 },
        {
            label: '订单编号',
            prop: 'orderId',
            align: 'center',
            slot: 'orderId'
        },
        { label: '参与时间', prop: 'orderTime', width: 160 },
        {
            label: '省份',
            prop: 'provinceName',
            formatter: (row) => row.provinceName || '--'
        },
        {
            label: '地区',
            prop: 'cityName',
            formatter: (row) => row.cityName || '--'
        },
        { label: '订单总本数', prop: 'totalNum' },
        { label: '加价本数', prop: 'upsellNum' },
        { label: '订单总金额', prop: 'expectMoney' },
        {
            label: '实际加价金额',
            prop: 'upsellFinalMoney',
            formatter: (row) => row.upsellFinalMoney || '--'
        },
        {
            columnKey: 'action',
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action',
            fixed: 'right'
        }
    ]);

    // 搜索
    const handleSearch = (where) => {
        let data = JSON.parse(JSON.stringify(where));
        tableRef.value?.reload(data);
    };

    const orderDetailRef = ref(null);
    const handleOrderId = (row) => {
        orderDetailRef.value?.handleOpen(row);
    };

    // 导出Excel
    const handleExportExcel = () => {
        tableRef.value?.exportData();
    };

    // 分享处理
    const handleShare = (row) => {
        shareRef.value?.handleOpen(row);
    };
    // 刷新表格
    const reload = () => {
        tableRef.value?.reload();
    };

    defineExpose({
        reload
    });
</script>

<style lang="scss" scoped>
    .app-container {
        padding: 15px;
    }
</style>
