<template>
    <div class="activity-analysis">
        <div class="section-title">{{ title }}</div>

        <!-- Stats Grid -->
        <div class="stats-grid">
            <div v-for="(stat, index) in stats" :key="index" class="stat-card">
                <div class="stat-label">{{ stat.label }}</div>
                <div class="stat-value">{{ stat.value }}</div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="charts-row">
            <!-- Left: New/Old Repurchase -->
            <div class="chart-box left-chart">
                <div class="chart-title">拉新复购</div>
                <div class="chart-content">
                    <base-chart :option="donutOption" />
                </div>
            </div>

            <!-- Right: Traffic Conversion -->
            <div class="chart-box right-chart">
                <div class="chart-title">流量转化</div>
                <div class="chart-content">
                    <funnel-chart
                        :visitor-count="funnelData.visitorCount"
                        :payment-count="funnelData.paymentCount"
                        :unit-price="funnelData.unitPrice"
                        :conversion-rate="funnelData.conversionRate"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

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

    const props = defineProps({
        title: {
            type: String,
            required: true
        },
        stats: {
            type: Array,
            default: () => []
        },
        newCustomerRatio: {
            type: Number,
            default: 0.6 // 60% new
        },
        funnelData: {
            type: Object,
            default: () => ({
                visitorCount: 32,
                paymentCount: 32,
                unitPrice: 32,
                conversionRate: '65%'
            })
        }
    });

    const donutOption = computed(() => ({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
            data: ['老客户成交占比', '新客户成交占比']
        },
        series: [
            {
                name: '成交占比',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}\n{d}%'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: [
                    {
                        value: 1 - props.newCustomerRatio,
                        name: '老客户成交占比',
                        itemStyle: { color: '#5b8ff9' }
                    },
                    {
                        value: props.newCustomerRatio,
                        name: '新客户成交占比',
                        itemStyle: { color: '#5ebcb9' }
                    }
                ]
            }
        ]
    }));
</script>

<style scoped lang="scss">
    .activity-analysis {
        margin-top: 30px;
        border-top: 1px solid #eee;
        padding-top: 20px;
    }

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

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    .stat-card {
        background-color: #f0f2f5;
        padding: 20px;
        border-radius: 4px;
        text-align: center;

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

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

    .charts-row {
        display: flex;
        gap: 20px;
    }

    .chart-box {
        flex: 1;
        background-color: #f0f2f5;
        padding: 20px;
        border-radius: 4px;
        height: 350px;
        display: flex;
        flex-direction: column;

        .chart-title {
            font-size: 14px;
            font-weight: bold;
            color: #666;
            margin-bottom: 10px;
        }

        .chart-content {
            flex: 1;
            position: relative;
        }
    }
</style>
