<template>
    <div class="template-data">
        <!-- Header Info -->
        <div
            class="bg-gray-50 p-4 rounded mb-4 text-sm text-gray-600 flex justify-between items-center"
        >
            <div class="space-x-8">
                <span>使用条件：{{ info.condition }}</span>
                <span>券面额：{{ info.amount }}</span>
                <span>有效时间：{{ info.validity }}</span>
            </div>
            <div>数据更新时间：{{ info.updateTime }}</div>
        </div>

        <!-- Stats Grid -->
        <div class="mb-4">
            <h3 class="text-base font-medium mb-3">模板累计效果</h3>
            <div class="grid grid-cols-7 gap-4 text-center">
                <div
                    v-for="item in stats"
                    :key="item.label"
                    class="flex flex-col"
                >
                    <span class="text-gray-500 text-xs mb-1">{{
                        item.label
                    }}</span>
                    <span class="text-lg font-bold">{{ item.value }}</span>
                </div>
            </div>
        </div>

        <!-- Chart Section -->
        <div class="border-t pt-4">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center space-x-2">
                    <el-radio-group
                        v-model="dateRangeType"
                        @change="handleDateTypeChange"
                    >
                        <el-radio-button label="day">日</el-radio-button>
                        <el-radio-button label="7days">7日</el-radio-button>
                        <el-radio-button label="30days">30日</el-radio-button>
                    </el-radio-group>
                    <el-date-picker
                        v-model="dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 240px"
                    />
                    <el-button type="primary" plain @click="fetchData"
                        >查询</el-button
                    >
                    <el-button @click="reset">重置</el-button>
                </div>
                <div class="text-xs text-gray-500"
                    >统计时间：{{ queryTime }}</div
                >
            </div>

            <!-- Metric Tabs -->
            <div class="grid grid-cols-7 gap-0 border mb-4">
                <div
                    v-for="(metric, index) in metrics"
                    :key="index"
                    class="p-3 border-r last:border-r-0 cursor-pointer hover:bg-gray-50 transition-colors"
                    :class="{
                        'bg-blue-50 border-b-2 border-b-blue-500':
                            activeMetric === metric.key
                    }"
                    @click="activeMetric = metric.key"
                >
                    <div class="text-xs text-gray-500 mb-1">{{
                        metric.label
                    }}</div>
                    <div class="text-lg font-bold mb-1">{{ metric.value }}</div>
                    <div class="text-xs flex items-center">
                        <span class="text-gray-400 mr-1">较前1日</span>
                        <span
                            :class="
                                metric.trend > 0
                                    ? 'text-green-500'
                                    : 'text-red-500'
                            "
                        >
                            {{ metric.trend > 0 ? '↑' : '↓' }}
                            {{ Math.abs(metric.trend) }}%
                        </span>
                    </div>
                </div>
            </div>

            <!-- Chart -->
            <div class="h-[300px]">
                <BaseChart :option="chartOption" />
            </div>
        </div>
    </div>
</template>

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

    const info = reactive({
        condition: '25.00元',
        amount: '2-4元',
        validity: '2024-10-01 00:00:00 至 2024-11-20 00:00:00',
        updateTime: '2024-10-05'
    });

    const stats = ref([
        { label: '发行量 (张)', value: '658' },
        { label: '累计领取量 (张)', value: '658' },
        { label: '红包消耗金额 (元)', value: '658' },
        { label: '累计使用量 (张)', value: '658' },
        { label: '累计使用率', value: '65.8%' },
        { label: '累计支付件数', value: '658' },
        { label: '红包拉动成交金额', value: '658' }
    ]);

    const dateRangeType = ref('day');
    const dateRange = ref([]);
    const queryTime = ref('2024-06-28');

    const activeMetric = ref('collection');
    const metrics = ref([
        { key: 'collection', label: '领取张数', value: '658', trend: -48.65 },
        { key: 'usage', label: '使用张数', value: '658', trend: -48.65 },
        {
            key: 'consumption',
            label: '红包消耗金额',
            value: '658',
            trend: -48.65
        },
        {
            key: 'transaction',
            label: '红包拉动支付金额',
            value: '658.68',
            trend: -48.65
        },
        { key: 'buyers', label: '支付买家数', value: '658', trend: 48.65 },
        { key: 'items', label: '支付件数', value: '658', trend: 48.65 },
        { key: 'price', label: '客单价', value: '658', trend: 48.65 }
    ]);

    const chartOption = computed(() => {
        return {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: metrics.value.find(
                        (m) => m.key === activeMetric.value
                    )?.label,
                    type: 'line',
                    smooth: true,
                    itemStyle: { color: '#5b8ff9' },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(91, 143, 249, 0.5)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(91, 143, 249, 0)'
                                }
                            ]
                        }
                    },
                    data: [100, 140, 220, 100, 130] // Mock data
                }
            ]
        };
    });

    const handleDateTypeChange = (val) => {
        // Logic to set dateRange based on val
        console.log('Date type changed:', val);
    };

    const fetchData = () => {
        console.log('Fetching data...');
    };

    const reset = () => {
        dateRangeType.value = 'day';
        dateRange.value = [];
    };
</script>
