<!-- 红包码统计 -->
<template>
    <div class="red-bag-statistics">
        <!-- 统计汇总卡片 -->
        <ele-card :body-style="{ padding: '20px' }" style="margin-bottom: 16px">
            <div class="stats-row">
                <div class="stat-item">
                    <div class="stat-label">扫码领取用户数</div>
                    <div class="stat-value">{{
                        summaryStats.scanDrawSumUserNum || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">领取总用户数</div>
                    <div class="stat-value">{{
                        summaryStats.drawSumUserNum || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">扫码总次数</div>
                    <div class="stat-value">{{
                        summaryStats.scanSumNum || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">A 分享红包数量</div>
                    <div class="stat-value">{{
                        summaryStats.shareUserNum || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">B 被分享红包数量</div>
                    <div class="stat-value">{{
                        summaryStats.sharedUserNum || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">扫码领取小程序红包金额</div>
                    <div class="stat-value">{{
                        summaryStats.scanMiniProgramPrice || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">扫码领取现金红包金额</div>
                    <div class="stat-value">{{
                        summaryStats.scanRedCashPrice || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">A 分享得金额</div>
                    <div class="stat-value">{{
                        summaryStats.shareUserPrice || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">B 被分享得金额</div>
                    <div class="stat-value">{{
                        summaryStats.sharedUserPrice || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">人均领取现金红包金额</div>
                    <div class="stat-value">{{
                        summaryStats.scanRedCashPriceUserAvg || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">人均领取小程序红包金额</div>
                    <div class="stat-value">{{
                        summaryStats.scanMiniProgramPriceUserAvg || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">红包使用数量</div>
                    <div class="stat-value">{{
                        summaryStats.redUseNum || 0
                    }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-label">红包使用金额</div>
                    <div class="stat-value">{{
                        summaryStats.redUserPrice || 0
                    }}</div>
                </div>
            </div>
        </ele-card>

        <!-- 搜索栏 -->
        <div
            style="
                display: flex;
                gap: 10px;
                align-items: center;
                max-width: 600px;
            "
        >
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                style="width: 240px"
            />
            <el-button type="primary" @click="reload()">查询</el-button>
            <el-button type="primary" plain @click="resetSearch"
                >重置</el-button
            >
        </div>

        <!-- 统计列表表格 -->
        <common-table
            ref="pageRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :body-style="{ padding: '0' }"
        />
    </div>
</template>

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

    defineOptions({ name: 'RedBagStatistics' });

    // 汇总统计数据
    const summaryStats = ref({});

    // 日期范围
    const dateRange = ref([]);

    const resetSearch = () => {
        dateRange.value = [];
        reload();
    };

    // 表格列配置
    const columns = ref([
        {
            label: '序号',
            type: 'index',
            align: 'center',
            width: 80
        },
        {
            label: '日期',
            prop: 'countDays',
            align: 'center',
            width: 120
        },
        {
            label: '扫码领取用户数',
            prop: 'scanDrawSumUserNum',
            align: 'center',
            minWidth: 140
        },
        {
            label: '领取总用户数',
            prop: 'drawSumUserNum',
            align: 'center',
            minWidth: 130
        },
        {
            label: '扫码总次数',
            prop: 'scanSumNum',
            align: 'center',
            minWidth: 110
        },
        {
            label: '扫码领取小程序红包金额',
            prop: 'scanMiniProgramPrice',
            align: 'center',
            minWidth: 190
        },
        {
            label: '扫码领取现金红包金额',
            prop: 'scanRedCashPrice',
            align: 'center',
            minWidth: 190
        },
        {
            label: '人均领取现金红包金额',
            prop: 'scanRedCashPriceUserAvg',
            align: 'center',
            minWidth: 190
        },
        {
            label: '人均领取小程序红包金额',
            prop: 'scanMiniProgramPriceUserAvg',
            align: 'center',
            minWidth: 190
        },
        {
            label: 'A 分享红包领取数量',
            prop: 'shareUserNum',
            align: 'center',
            minWidth: 160
        },
        {
            label: 'A 分享红包领取金额',
            prop: 'shareUserPrice',
            align: 'center',
            minWidth: 160
        },
        {
            label: 'B被分享红包领取数量',
            prop: 'sharedUserNum',
            align: 'center',
            minWidth: 170
        },
        {
            label: 'B被分享红包领取金额',
            prop: 'sharedUserPrice',
            align: 'center',
            minWidth: 170
        },
        {
            label: '红包使用数量',
            prop: 'redUseNum',
            align: 'center',
            minWidth: 120
        },
        {
            label: '红包使用金额',
            prop: 'redUserPrice',
            align: 'center',
            minWidth: 130
        }
    ]);

    // 页面配置
    const pageRef = ref(null);
    const pageConfig = reactive({
        pageUrl: '/activity/red/bag/sum/activity/redBag/sum/pagelist',
        fileName: '红包码统计',
        cacheKey: 'redBagStatisticsTable'
    });

    // 刷新表格
    function reload() {
        const params = {};
        if (dateRange.value && dateRange.value.length === 2) {
            params.startTime = dateRange.value[0] + ' 00:00:00';
            params.endTime = dateRange.value[1] + ' 23:59:59';
        }
        pageRef.value?.reload(params);
    }

    // 加载汇总统计
    const loadSummaryStats = () => {
        const params = {};
        if (dateRange.value && dateRange.value.length === 2) {
            params.startTime = dateRange.value[0] + ' 00:00:00';
            params.endTime = dateRange.value[1] + ' 23:59:59';
        }

        request
            .get('/activity/red/bag/sum/activity/redBag/sum/statistics', {
                params
            })
            .then((res) => {
                if (res.data.code === 200) {
                    summaryStats.value = res.data.data || {};
                }
            });
    };

    // 监听日期变化，重新加载汇总数据
    watch(
        dateRange,
        () => {
            loadSummaryStats();
        },
        { deep: true }
    );

    // 初始化加载
    loadSummaryStats();
</script>

<style lang="scss" scoped>
    .red-bag-statistics {
        .stats-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }

        .stats-row {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;

            .stat-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-width: 140px;
                flex: 0 0 auto;

                .stat-label {
                    font-size: 13px;
                    color: #666;
                    text-align: center;
                    line-height: 1.4;
                    min-height: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .stat-value {
                    font-size: 26px;
                    font-weight: bold;
                    color: #409eff;
                    line-height: 1.2;
                }
            }
        }

        // 表格样式优化
        :deep(.el-table) {
            .el-table__header th {
                font-size: 13px;
                font-weight: 600;
                color: #333;
                padding: 12px 8px;
                background-color: #fafafa;
            }

            .el-table__body td {
                font-size: 13px;
                padding: 10px 8px;
            }
        }
    }
</style>
