<template>
    <ele-modal
        v-model="visible"
        title="活动详情"
        width="1000px"
        :footer="null"
        custom-class="quantity-discount-data-dialog"
    >
        <div class="">
            <!-- 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>满元/满件</span>
                    <el-tag size="small">进行中</el-tag>
                    <span>活动ID：6903135127</span>
                    <span>活动范围：全店</span>
                    <span>优惠方式：满元（减钱）</span>
                    <span
                        >有效时间：2024-10-01 00:00:00 至 2024-11-20
                        00:00:00</span
                    >
                </div>
                <div>数据更新时间：2024-10-05</div>
            </div>

            <!-- Stats Grid -->
            <div class="mb-4">
                <h3 class="text-base font-medium mb-3">活动累计效果</h3>
                <div class="grid grid-cols-4 gap-4 text-center">
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1"
                            >累计支付订单数</span
                        >
                        <span class="text-lg font-bold">658</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1"
                            >累计支付金额</span
                        >
                        <span class="text-lg font-bold">658</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1"
                            >累计支付件数</span
                        >
                        <span class="text-lg font-bold">658</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="text-gray-500 text-xs mb-1"
                            >累计优惠金额</span
                        >
                        <span class="text-lg font-bold">658</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" size="small">
                            <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="结束日期"
                            size="small"
                            style="width: 240px"
                        />
                        <el-button type="primary" size="small" plain
                            >查询</el-button
                        >
                        <el-button size="small">重置</el-button>
                    </div>
                    <div class="text-xs text-gray-500"
                        >统计时间：2024-06-28</div
                    >
                </div>

                <!-- Metric Tabs -->
                <div class="grid grid-cols-6 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>
    </ele-modal>
</template>

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

    const props = defineProps({
        modelValue: Boolean
    });

    const emit = defineEmits(['update:modelValue']);

    const visible = computed({
        get: () => props.modelValue,
        set: (val) => emit('update:modelValue', val)
    });

    const dateRangeType = ref('day');
    const dateRange = ref([]);
    const activeMetric = ref('orders');

    const metrics = ref([
        { key: 'orders', label: '支付订单数', value: '658', trend: -48.65 },
        { key: 'buyers', label: '支付买家数', value: '658', trend: -48.65 },
        { key: 'amount', label: '支付金额', value: '658.68', trend: -48.65 },
        { key: 'avgItems', label: '人均支付件数', value: '658', trend: 48.65 },
        { key: 'discount', 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
                }
            ]
        };
    });
</script>

<style scoped>
    :deep(.quantity-discount-data-dialog .el-dialog__header) {
        display: none;
    }
</style>
