<template>
    <ele-page>
        <ele-card :body-style="{ padding: '20px' }">
            <!-- Header / Filters -->
            <div class="filter-container">
                <div class="date-ranges">
                    <el-button
                        v-for="range in dateRanges"
                        :key="range.value"
                        :type="activeRange === range.value ? 'primary' : ''"
                        @click="activeRange = range.value"
                    >
                        {{ range.label }}
                    </el-button>
                </div>
                <div class="date-picker-wrapper">
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    />
                </div>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
            </div>

            <!-- Marketing Overview -->
            <marketing-overview />

            <!-- Surprise Red Packet Activity -->
            <activity-analysis
                title="惊喜红包活动"
                :stats="redPacketStats"
                :new-customer-ratio="0.6"
                :funnel-data="funnelData1"
            />

            <!-- Share Price Reduction Activity -->
            <activity-analysis
                title="分享降价活动"
                :stats="shareStats"
                :new-customer-ratio="0.35"
                :funnel-data="funnelData2"
            />

            <!-- Full Reduction Discount -->
            <activity-analysis
                title="满减优惠"
                :stats="fullReductionStats"
                :new-customer-ratio="0.65"
                :funnel-data="funnelData3"
            />
        </ele-card>
    </ele-page>
</template>

<script setup>
    import { ref } from 'vue';
    import MarketingOverview from './components/MarketingOverview.vue';
    import ActivityAnalysis from './components/ActivityAnalysis.vue';

    // Filters
    const activeRange = ref('yesterday');
    const dateRange = ref([]);
    const dateRanges = [
        { label: '昨日', value: 'yesterday' },
        { label: '7日', value: '7days' },
        { label: '15日', value: '15days' },
        { label: '30日', value: '30days' }
    ];

    const handleSearch = () => {
        console.log('Search clicked', activeRange.value, dateRange.value);
    };

    // Mock Data
    const redPacketStats = [
        { label: '红包拉动成交金额 (元)', value: '1999.9' },
        { label: '参与人数 (人)', value: '200' },
        { label: '客单价(元)', value: '200' },
        { label: '订单覆盖率', value: '20%' },
        { label: '红包过期率', value: '20%' },
        { label: '红包使用数(张)', value: '200' },
        { label: '红包领取金额(元)', value: '200' },
        { label: '红包消耗金额 (元)', value: '200.00' },
        { label: '红包使用率', value: '0.10%' },
        { label: '红包待使用金额(元)', value: '200' },
        { label: '红包待使用量(张)', value: '200' },
        { label: '红包领取数(张)', value: '200' }
    ];

    const shareStats = [
        { label: '营销支付金额', value: '1999.99 (元)' },
        { label: '营销优惠金额', value: '200.00 (元)' },
        { label: '参与人数', value: '200.00 (人)' },
        { label: '支付订单数', value: '200.00 (单)' },
        { label: '客单价', value: '200.00 (元)' },
        { label: '助力人数', value: '200.00 (人)' }
    ];

    const fullReductionStats = [
        { label: '营销支付金额', value: '1999.99 (元)' },
        { label: '营销优惠金额', value: '200.00 (元)' },
        { label: '参与人数', value: '200.00 (人)' },
        { label: '支付订单数', value: '200.00 (单)' },
        { label: '客单价', value: '200.00 (元)' }
    ];

    const funnelData1 = {
        visitorCount: 32,
        paymentCount: 32,
        unitPrice: 32,
        conversionRate: '65%'
    };

    const funnelData2 = {
        visitorCount: 32,
        paymentCount: 32,
        unitPrice: 32,
        conversionRate: '65%'
    };

    const funnelData3 = {
        visitorCount: 32,
        paymentCount: 32,
        unitPrice: 32,
        conversionRate: '65%'
    };
</script>

<style scoped lang="scss">
    .filter-container {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .date-ranges {
            margin-right: 15px;

            .el-button {
                margin-right: 5px;
                margin-left: 0;
            }
        }

        .date-picker-wrapper {
            margin-right: 15px;
        }
    }
</style>
