<template>
    <div class="flex flex-col">
        <el-row :gutter="16" class="mt-4">
            <el-col :span="8">
                <div class="statistic-card">
                    <el-statistic
                        title="今日"
                        :value="todayActiveNum"
                        suffix="人"
                    />
                    <div class="statistic-footer">
                        <span>对比昨日</span>
                        <el-text :type="comparisonType">
                            {{ comparisonValue }}%<el-icon
                                ><component :is="comparisonIcon"
                            /></el-icon>
                        </el-text>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <el-statistic
                    :value="yesterdayActiveNum"
                    title="昨日"
                    suffix="人"
                />
            </el-col>
            <!-- <el-col :span="8">
                <el-statistic :value="averageActiveNum" title="均值" suffix="人" />
            </el-col> -->
        </el-row>
        <v-chart ref="saleChartRef" style="height: 280px" :option="options" />
    </div>
</template>
<script setup>
    import { ref, reactive, computed } from 'vue';
    import VChart from 'vue-echarts';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { LineChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        ToolboxComponent
    } from 'echarts/components';
    import { Top, Bottom } from '@element-plus/icons-vue';

    // 按需加载echarts
    use([
        CanvasRenderer,
        LineChart,
        GridComponent,
        TooltipComponent,
        LegendComponent
    ]);

    const props = defineProps({
        todayActiveNum: {
            type: Number,
            default: 0
        },
        yesterdayActiveNum: {
            type: Number,
            default: 0
        },
        chatAxis: {
            type: Array,
            default: () => []
        },
        todayActiveNumCharts: {
            type: Array,
            default: () => []
        },
        yesterdayActiveNumCharts: {
            type: Array,
            default: () => []
        },
        todayActiveNumComparison: {
            type: Number,
            default: 0
        }
    });

    // 计算均值
    const averageActiveNum = computed(() => {
        if (props.todayActiveNumCharts.length === 0) return 0;
        const sum = props.todayActiveNumCharts.reduce(
            (acc, val) => acc + val,
            0
        );
        return Math.round(sum / props.todayActiveNumCharts.length);
    });

    // 计算环比显示（这里简化处理，实际应该从接口获取环比数据）
    const comparisonType = computed(() => {
        const comparison = props.todayActiveNumComparison;
        return comparison > 0 ? 'success' : 'danger';
    });

    const comparisonValue = computed(() => {
        const comparison = props.todayActiveNumComparison;
        return Math.abs(comparison);
    });

    const comparisonIcon = computed(() => {
        const comparison = props.todayActiveNumComparison;
        return comparison > 0 ? Top : Bottom;
    });

    const options = computed(() => ({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['今日活跃用户', '昨日活跃用户']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.chatAxis || []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '今日活跃用户',
                type: 'line',
                data: props.todayActiveNumCharts || [],
                smooth: true
            },
            {
                name: '昨日活跃用户',
                type: 'line',
                data: props.yesterdayActiveNumCharts || [],
                smooth: true
            }
        ]
    }));
</script>
