{% extends "base.html" %}

{% block title %}首页概览 - 机器人管理后台{% endblock %}

{% block content %}
<!-- 首页概览 -->
<div>
    <!-- 用户信息和统计数据 -->
    <el-row :gutter="20">
        <el-col :span="4">
            <el-card shadow="hover" class="stats-card">
                <div slot="header">
                    <span>总调用次数</span>
                </div>
                <div style="font-size: 24px; text-align: center;">
                    {% raw %}{{ totalCalls }}{% endraw %}
                </div>
            </el-card>
        </el-col>
        <!-- 其他统计卡片保持不变 -->
        <!-- ... 其他统计卡片 ... -->
    </el-row>
        
    <!-- 添加热门用户、群组和插件 -->
    <el-row :gutter="20" style="margin-top: 20px;">
        <!-- 热门用户、群组和插件部分保持不变 -->
        <!-- ... 热门用户、群组和插件部分 ... -->
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
            <div class="chart-container">
                <h3>插件使用排行</h3>
                <canvas id="pluginChart" width="400" height="150"></canvas>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="chart-container">
                <h3>成功率分析</h3>
                <canvas id="successRateChart" width="400" height="150"></canvas>
            </div>
        </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
            <div class="chart-container">
                <h3>使用趋势</h3>
                <canvas id="trendChart" width="800" height="150"></canvas>
            </div>
        </el-col>
    </el-row>
    
    <!-- 系统状态卡片移到底部 -->
    <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
            <el-card shadow="hover">
                <div slot="header">
                    <span>系统状态</span>
                    <span class="system-info-summary">
                        操作系统: {% raw %}{{ systemInfo.os }} {{ systemInfo.os_version }}{% endraw %} | 
                        Python版本: {% raw %}{{ systemInfo.python_version }}{% endraw %} | 
                        运行时间: {% raw %}{{ formattedUptime }}{% endraw %} | 
                        最后更新: {% raw %}{{ systemInfo.timestamp }}{% endraw %}
                    </span>
                </div>
                <el-row :gutter="20">
                    <!-- 左侧用户信息 -->
                    <el-col :span="6">
                        <div class="chart-container pie-chart-container user-info-chart">
                            <div v-if="currentUser.success" class="user-info-container">
                                <div class="user-avatar-container">
                                    <img :src="'/static/' + currentUser.data.avatar" alt="用户头像" />
                                </div>
                                <div class="user-info-details">
                                    <!-- 用户信息项保持不变 -->
                                    <!-- ... 用户信息项 ... -->
                                </div>
                            </div>
                            <div v-else class="user-info-empty">
                                <i class="el-icon-warning"></i>
                                <div>{% raw %}{{ currentUser.message || '未获取到用户信息' }}{% endraw %}</div>
                            </div>
                        </div>
                    </el-col>
                    
                    <!-- 移除中间系统信息部分，改为占位 -->
                    <el-col :span="6">
                        <!-- 占位，可以放置其他信息 -->
                    </el-col>
                    
                    <el-col :span="12">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="chart-container pie-chart-container">
                                    <h4>CPU使用率: {% raw %}{{ systemInfo.cpu_usage }}{% endraw %}%</h4>
                                    <canvas id="cpuChart" width="72" height="72"></canvas>
                                </div>
                            </el-col>
                            <!-- 其他饼图保持不变 -->
                            <!-- ... 其他饼图 ... -->
                        </el-row>
                    </el-col>
                </el-row>
            </el-card>
        </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,
                avgResponseTime: 0,  // 确保这里初始化为数字
                topUsers: [],
                topGroups: [],
                topPlugins: [],
                pluginStats: [],
                charts: {},  // 添加charts对象
                // 添加当前用户信息对象
                currentUser: {
                    success: false,
                    message: '加载中...',
                    data: {}
                },
                // 添加系统信息相关数据
                systemInfo: {
                    os: '加载中...',
                    os_version: '',
                    python_version: '加载中...',
                    cpu_usage: 0,
                    memory_usage: 0,
                    disk_usage: 0,
                    uptime: 0,
                    timestamp: '-'
                }
            }
        },
        computed: {
            // 计算属性：格式化的运行时间
            formattedUptime() {
                const seconds = this.systemInfo.uptime;
                const days = Math.floor(seconds / 86400);
                const hours = Math.floor((seconds % 86400) / 3600);
                const minutes = Math.floor((seconds % 3600) / 60);
                
                let result = '';
                if (days > 0) result += days + '天 ';
                if (hours > 0 || days > 0) result += hours + '小时 ';
                result += minutes + '分钟';
                
                return result;
            }
        },
        mounted() {
            this.currentView = '1';
            this.loadData();
            // 加载系统信息
            this.loadSystemInfo();
            // 加载当前用户信息
            this.loadCurrentUserInfo();
            // 设置定时刷新系统信息（每30秒）
            this.systemInfoTimer = setInterval(this.loadSystemInfo, 30000);
        },
        beforeDestroy() {
            // 组件销毁前清除定时器
            if (this.systemInfoTimer) {
                clearInterval(this.systemInfoTimer);
            }
        },
        methods: {
            loadData() {
                const days = parseInt(this.timeRange);
                this.loadDashboardSummary(days);
                this.loadPluginStats(days);
                this.loadPluginTrend(days);
            },
            // 添加加载系统信息的方法
            loadSystemInfo() {
                axios.get('/api/system_info')
                    .then(response => {
                        if (response.data.success) {
                            this.systemInfo = response.data.data;
                            this.$nextTick(() => {
                                this.renderSystemCharts();
                            });
                        }
                    })
                    .catch(error => {
                        console.error('加载系统信息出错:', error);
                    });
            },
            // 渲染系统状态饼图
            renderSystemCharts() {
                // 渲染CPU使用率饼图
                this.renderPieChart('cpuChart', this.systemInfo.cpu_usage, 'CPU使用率');
                
                // 渲染内存使用率饼图
                this.renderPieChart('memoryChart', this.systemInfo.memory_usage, '内存使用率');
                
                // 渲染磁盘使用率饼图
                this.renderPieChart('diskChart', this.systemInfo.disk_usage, '磁盘使用率');
            },
            // 通用饼图渲染方法
            renderPieChart(chartId, usageValue, label) {
                const ctx = document.getElementById(chartId).getContext('2d');
                
                // 销毁旧图表
                if (this.charts[chartId]) {
                    this.charts[chartId].destroy();
                }
                
                // 设置颜色
                let color = 'rgba(75, 192, 192, 1)'; // 绿色 (低负载)
                if (usageValue > 70) {
                    color = 'rgba(255, 99, 132, 1)'; // 红色 (高负载)
                } else if (usageValue > 50) {
                    color = 'rgba(255, 205, 86, 1)'; // 黄色 (中等负载)
                }
                
                // 创建新图表
                this.charts[chartId] = new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: ['已使用', '可用'],
                        datasets: [{
                            data: [usageValue, 100 - usageValue],
                            backgroundColor: [
                                color,
                                'rgba(220, 220, 220, 0.6)'
                            ],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        cutout: '70%',
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return context.label + ': ' + context.raw + '%';
                                    }
                                }
                            }
                        }
                    }
                });
            },
            // 添加获取当前用户信息的方法
            loadCurrentUserInfo() {
                axios.get('/api/current_user_info')
                    .then(response => {
                        this.currentUser = response.data;
                    })
                    .catch(error => {
                        console.error('加载当前用户信息出错:', error);
                        this.currentUser = {
                            success: false,
                            message: '获取用户信息失败',
                            data: {}
                        };
                    });
            },
            // 添加获取进度条状态的方法
            getProgressStatus(value) {
                if (value > 70) {
                    return 'exception';  // 红色 (高负载)
                } else if (value > 50) {
                    return 'warning';    // 黄色 (中等负载)
                } else {
                    return 'success';    // 绿色 (低负载)
                }
            },
            
            loadDashboardSummary(days) {
                axios.get(`/api/dashboard_summary?days=${days}`)
                    .then(response => {
                        if (response.data.success) {
                            const data = response.data.data;
                            this.totalCalls = parseInt(data.total_calls) || 0;
                            this.successRate = parseFloat(data.success_rate) || 0;
                            this.activeUsers = data.active_users || 0;
                            this.activeGroups = data.active_groups || 0;
                            this.avgResponseTime = parseFloat(data.avg_response_time) || 0;
                            this.topUsers = data.top_users || [];
                            this.topGroups = data.top_groups || [];
                            this.topPlugins = data.top_plugins || [];
                        }
                    })
                    .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}(${item.command})`);
                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}(${item.command})`);
                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 && this.charts.trendChart) {
                    this.charts.trendChart.destroy();
                }
                
                // 确保charts对象存在
                if (!this.charts) {
                    this.charts = {};
                }
                
                // 准备数据 - 修改字段名匹配和数据类型转换
                const labels = trendData.map(item => item.date); // 使用date而不是stat_date
                const totalData = trendData.map(item => parseInt(item.total_calls) || 0); // 确保转换为数字
                const successData = trendData.map(item => parseInt(item.success_calls) || 0);
                const errorData = trendData.map(item => parseInt(item.failed_calls) || 0); // 使用failed_calls而不是error_calls
                
                console.log('处理后的趋势数据:', { labels, totalData, successData, errorData });
                
                // 创建新图表
                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,
                        maintainAspectRatio: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }
    });
</script>
{% endblock %}

{% block styles %}
<style>
    .stats-card {
        margin-bottom: 15px;
        height: 120px;
    }
    
    .chart-container {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    
    .chart-container h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 16px;
        color: #606266;
    }
    
    /* 饼图容器样式 */
    .pie-chart-container {
        padding: 4px;
        text-align: center;
        margin-bottom: 0;
        box-shadow: none;
    }
    
    .pie-chart-container h4 {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 11px;
        color: #606266;
    }
    
    /* 系统状态卡片样式 */
    .system-info-item {
        margin-bottom: 15px;
    }
    
    .system-info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    
    .system-update-time {
        text-align: right;
        font-size: 12px;
        color: #909399;
        margin-top: 10px;
    }
    
    /* 用户信息图表容器样式 */
    .user-info-chart {
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 5px;
        margin-bottom: 0;
        box-shadow: none;
    }
    
    .user-info-container {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* 调整高度与饼图完全一致 */
        height: 100px;
    }
    
    .user-avatar-container {
        text-align: center;
        margin-bottom: 5px;
    }
    
    .user-avatar-container img {
        width: 45px; /* 进一步缩小头像 */
        height: 45px;
        border-radius: 50%;
        border: 1px solid #fff; /* 减小边框 */
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    .user-info-details {
        display: flex;
        flex-direction: column;
        gap: 3px; /* 减小间距 */
    }
    
    .user-info-item {
        display: flex;
        align-items: center;
        font-size: 11px; /* 进一步缩小字体 */
        justify-content: center;
        height: 16px; /* 固定每行高度 */
    }
    
    .user-info-label {
        width: 50px;
        color: #606266;
        font-weight: 500;
        flex-shrink: 0;
        text-align: right;
        padding-right: 5px;
    }
    
    .user-info-value {
        color: #303133;
        flex: 1;
        word-break: break-all;
        text-align: left;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .user-home-path {
        font-size: 10px;
    }
    
    .user-info-empty {
        text-align: center;
        color: #909399;
        padding: 20px 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .user-info-empty i {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .user-info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        line-height: 1.5;
    }
    
    .info-label {
        color: #606266;
        font-weight: 500;
    }
    
    .info-value {
        color: #303133;
        text-align: right;
    }
    
    .system-update-time {
        text-align: right;
        font-size: 12px;
        color: #909399;
        margin-top: auto;
    }
</style>
{% endblock %}