<template>
    <div class="marketing-overview">
        <div class="overview-section">
            <div class="section-title">营销概要</div>

            <!-- Top Section: Analysis -->
            <ele-card class="analysis-card" :body-style="{ padding: '20px' }">
                <div class="card-header">营销分析</div>

                <div class="stats-row">
                    <div class="stat-item">
                        <div class="stat-label">有效活动数</div>
                        <div class="stat-value">3</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">营销支付金额</div>
                        <div class="stat-value">366994.6</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">营销支付金额占比</div>
                        <div class="stat-value">15.6%</div>
                    </div>
                </div>

                <div class="chart-wrapper horizontal-bar">
                    <base-chart :option="marketingDistributionOption" />
                </div>
            </ele-card>

            <!-- Bottom Section: Payment Amount -->
            <ele-card class="payment-card" :body-style="{ padding: '20px' }">
                <div class="card-header">支付金额</div>
                <div class="chart-wrapper payment-bar">
                    <base-chart :option="paymentAmountOption" />
                </div>
            </ele-card>
        </div>
    </div>
</template>

<script setup>
    import { reactive } from 'vue';
    import BaseChart from '@/components/Chart/BaseChart.vue';

    // Marketing Distribution Option (Horizontal Stacked Bar)
    const marketingDistributionOption = reactive({
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        legend: {
            bottom: 0,
            data: ['惊喜红包', '分享降价', '满减优惠']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true,
            height: '60px', // Thin bar
            top: 'center'
        },
        xAxis: {
            type: 'value',
            show: false,
            splitLine: { show: false }
        },
        yAxis: {
            type: 'category',
            data: [''],
            show: false,
            splitLine: { show: false }
        },
        series: [
            {
                name: '惊喜红包',
                type: 'bar',
                stack: 'total',
                label: { show: true, position: 'inside' },
                emphasis: { focus: 'series' },
                data: [100],
                itemStyle: { color: '#d4ad5b' },
                barWidth: 40
            },
            {
                name: '分享降价',
                type: 'bar',
                stack: 'total',
                label: { show: true, position: 'inside' },
                emphasis: { focus: 'series' },
                data: [300],
                itemStyle: { color: '#5ebcb9' }
            },
            {
                name: '满减优惠',
                type: 'bar',
                stack: 'total',
                label: { show: true, position: 'inside' },
                emphasis: { focus: 'series' },
                data: [100],
                itemStyle: { color: '#4caf50' }
            }
        ]
    });

    // Payment Amount Option (Bar Chart)
    const paymentAmountOption = reactive({
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        legend: {
            top: 0,
            right: 20,
            data: ['营销金额', '非营销金额']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [
                '8.1',
                '8.2',
                '8.3',
                '8.4',
                '8.5',
                '8.6',
                '8.7',
                '8.8',
                '8.9',
                '8.10',
                '8.11',
                '8.12'
            ]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '营销金额',
                type: 'bar',
                data: [
                    100, 140, 230, 100, 130, 210, 200, 180, 115, 150, 220, 120
                ],
                itemStyle: { color: '#5b8ff9' }
            },
            {
                name: '非营销金额',
                type: 'bar',
                data: [
                    150, 100, 200, 140, 100, 230, 210, 150, 145, 210, 190, 130
                ],
                itemStyle: { color: '#5ebcb9' }
            }
        ]
    });
</script>

<style scoped lang="scss">
    .marketing-overview {
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
    }

    .analysis-card {
        margin-bottom: 20px;
        background-color: #f5f5f5; // Light gray bg from design
        border: none;

        :deep(.el-card__body) {
            background-color: #f0f2f5;
        }
    }

    .payment-card {
        background-color: #f5f5f5;
        border: none;

        :deep(.el-card__body) {
            background-color: #f0f2f5;
        }
    }

    .card-header {
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
    }

    .stats-row {
        display: flex;
        justify-content: space-around;
        margin-bottom: 30px;
        text-align: center;

        .stat-label {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .stat-value {
            color: #333;
            font-size: 24px;
            font-weight: 500;
        }
    }

    .chart-wrapper {
        width: 100%;

        &.horizontal-bar {
            height: 100px;

            :deep(.base-chart) {
                min-height: 100px;
            }
        }

        &.payment-bar {
            height: 350px;
        }
    }
</style>
