{% extends "base.html" %}

{% block title %}首页概览 - 机器人统计看板{% endblock %}

{% block content %}
<!-- 首页概览 -->
<div>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-card shadow="hover" class="stats-card">
                <div slot="header">
                    <span>总调用次数</span>
                </div>
                <div style="font-size: 24px; text-align: center;">
                    {{ totalCalls }}
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stats-card">
                <div slot="header">
                    <span>成功率</span>
                </div>
                <div style="font-size: 24px; text-align: center;">
                    {{ successRate }}%
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stats-card">
                <div slot="header">
                    <span>活跃用户数</span>
                </div>
                <div style="font-size: 24px; text-align: center;">
                    {{ activeUsers }}
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" class="stats-card">
                <div slot="header">
                    <span>活跃群组数</span>
                </div>
                <div style="font-size: 24px; text-align: center;">
                    {{ activeGroups }}
                </div>
            </el-card>
        </el-col>
    </el-row>
    
    <el-row :gutter="20">
        <el-col :span="12">
            <div class="chart-container">
                <h3>插件使用排行</h3>
                <canvas id="pluginChart" width="400" height="300"></canvas>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="chart-container">
                <h3>成功率分析</h3>
                <canvas id="successRateChart" width="400" height="300"></canvas>
            </div>
        </el-col>
    </el-row>
    
    <el-row :gutter="20">
        <el-col :span="24">
            <div class="chart-container">
                <h3>使用趋势</h3>
                <canvas id="trendChart" width="800" height="300"></canvas>
            </div>
        </el-col>
    </el-row>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                totalCalls: 0,
                successRate: 0,
                activeUsers: 0,
                activeGroups: 0,
                pluginStats: []
            }
        },
        mounted() {
            this.currentView = '1';
            this.loadData();
        },
        methods: {
            loadData() {
                const days = parseInt(this.timeRange);
                this.loadDashboardSummary(days);
                this.loadPluginStats(days);
                this.loadPluginTrend(days);
            },
            loadDashboardSummary(days) {
                axios.get(`/api/dashboard_summary?days=${days}`)
                    .then(response => {
                        if (response.data.success) {
                            const data = response.data.data;
                            this.totalCalls = data.total_calls || 0;
                            this.successRate = data.success_rate || 0;
                            this.activeUsers = data.active_users || 0;
                            this.activeGroups = data.active_groups || 0;
                        }
                    })
                    .catch(error => {
                        console.error('加载仪表盘摘要数据出错:', error);
                        this.$message.error('加载仪表盘摘要数据出错');
                    });
            },
            loadPluginStats(days) {
                axios.get(`/api/plugin_stats?days=${days}`)
                    .then(response => {
                        if (response.data.success) {
                            this.pluginStats = response.data.data || [];
                            this.$nextTick(() => {
                                this.renderPluginChart();
                                this.renderSuccessRateChart();
                            });
                        }
                    })
                    .catch(error => {
                        console.error('加载插件统计数据出错:', error);
                        this.$message.error('加载插件统计数据出错');
                    });
            },
            loadPluginTrend(days) {
                axios.get(`/api/plugin_trend?days=${days}`)
                    .then(response => {
                        if (response.data.success) {
                            const trendData = response.data.data || [];
                            this.$nextTick(() => {
                                this.renderTrendChart(trendData);
                            });
                        }
                    })
                    .catch(error => {
                        console.error('加载插件趋势数据出错:', error);
                        this.$message.error('加载插件趋势数据出错');
                    });
            },
            renderPluginChart() {
                const ctx = document.getElementById('pluginChart').getContext('2d');
                
                // 销毁旧图表
                if (this.charts.pluginChart) {
                    this.charts.pluginChart.destroy();
                }
                
                // 准备数据
                const sortedData = [...this.pluginStats].sort((a, b) => b.total_calls - a.total_calls).slice(0, 10);
                const labels = sortedData.map(item => item.plugin_name);
                const data = sortedData.map(item => item.total_calls);
                
                // 创建新图表
                this.charts.pluginChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: '调用次数',
                            data: data,
                            backgroundColor: 'rgba(54, 162, 235, 0.6)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            },
            renderSuccessRateChart() {
                const ctx = document.getElementById('successRateChart').getContext('2d');
                
                // 销毁旧图表
                if (this.charts.successRateChart) {
                    this.charts.successRateChart.destroy();
                }
                
                // 准备数据
                const sortedData = [...this.pluginStats]
                    .filter(item => item.total_calls > 0)
                    .sort((a, b) => (b.success_calls / b.total_calls) - (a.success_calls / a.total_calls))
                    .slice(0, 10);
                
                const labels = sortedData.map(item => item.plugin_name);
                const data = sortedData.map(item => (item.success_calls / item.total_calls) * 100);
                
                // 创建新图表
                this.charts.successRateChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: '成功率 (%)',
                            data: data,
                            backgroundColor: 'rgba(75, 192, 192, 0.6)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 100
                            }
                        }
                    }
                });
            },
            renderTrendChart(trendData) {
                const ctx = document.getElementById('trendChart').getContext('2d');
                
                // 销毁旧图表
                if (this.charts.trendChart) {
                    this.charts.trendChart.destroy();
                }
                
                // 准备数据
                const labels = trendData.map(item => item.stat_date);
                const totalData = trendData.map(item => item.total_calls);
                const successData = trendData.map(item => item.success_calls);
                const errorData = trendData.map(item => item.error_calls);
                
                // 创建新图表
                this.charts.trendChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: '总调用',
                                data: totalData,
                                fill: false,
                                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                tension: 0.1
                            },
                            {
                                label: '成功调用',
                                data: successData,
                                fill: false,
                                backgroundColor: 'rgba(75, 192, 192, 0.6)',
                                borderColor: 'rgba(75, 192, 192, 1)',
                                tension: 0.1
                            },
                            {
                                label: '失败调用',
                                data: errorData,
                                fill: false,
                                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                                borderColor: 'rgba(255, 99, 132, 1)',
                                tension: 0.1
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }
    });
</script>
{% endblock %}