{% extends "base.html" %}

{% block title %}插件统计 - 机器人统计看板{% endblock %}

{% block content %}
<!-- 插件统计 -->
<div>
    <el-row {% raw %}:gutter="20"{% endraw %}>
        <el-col {% raw %}:span="24"{% endraw %}>
            <el-card shadow="hover">
                <div slot="header">
                    <span>插件使用统计</span>
                </div>
                <el-table {% raw %}:data="pluginStats"{% endraw %} style="width: 100%" border>
                    <el-table-column prop="plugin_name" label="插件名称"></el-table-column>
                    <el-table-column prop="total_calls" label="调用次数" sortable></el-table-column>
                    <el-table-column prop="success_calls" label="成功次数" sortable></el-table-column>
                    <el-table-column prop="error_calls" label="失败次数" sortable></el-table-column>
                    <el-table-column label="成功率" sortable>
                        <template slot-scope="scope">
                            {% raw %}{{ (scope.row.success_calls / scope.row.total_calls * 100).toFixed(2) }}{% endraw %}%
                        </template>
                    </el-table-column>
                    <el-table-column label="平均响应时间" sortable>
                        <template slot-scope="scope">
                            {% raw %}{{ scope.row.avg_response_time.toFixed(2) }}{% endraw %}ms
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" {% raw %}@click="viewPluginTrend(scope.row)"{% endraw %}>查看趋势</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    
    <!-- 插件趋势对话框 -->
    <el-dialog title="插件使用趋势" {% raw %}:visible.sync="pluginTrendVisible"{% endraw %} width="70%">
        <div class="chart-container">
            <h3>{% raw %}{{ selectedPlugin ? selectedPlugin.plugin_name : '' }}{% endraw %} 使用趋势</h3>
            <canvas id="pluginTrendChart" width="800" height="400"></canvas>
        </div>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                pluginStats: [],
                pluginTrendVisible: false,
                selectedPlugin: null
            }
        },
        mounted() {
            this.currentView = '2';
            this.loadData();
        },
        methods: {
            loadData() {
                const days = parseInt(this.timeRange);
                this.loadPluginStats(days);
            },
            loadPluginStats(days) {
                axios.get(`/api/plugin_stats?days=${days}`)
                    .then(response => {
                        if (response.data.success) {
                            this.pluginStats = response.data.data || [];
                        }
                    })
                    .catch(error => {
                        console.error('加载插件统计数据出错:', error);
                        this.$message.error('加载插件统计数据出错');
                    });
            },
            viewPluginTrend(plugin) {
                this.selectedPlugin = plugin;
                this.pluginTrendVisible = true;
                
                // 加载插件趋势数据
                const days = parseInt(this.timeRange);
                axios.get(`/api/plugin_trend?days=${days}&plugin_name=${plugin.plugin_name}`)
                    .then(response => {
                        if (response.data.success) {
                            const trendData = response.data.data || [];
                            this.$nextTick(() => {
                                this.renderPluginTrendChart(trendData, plugin.plugin_name);
                            });
                        }
                    })
                    .catch(error => {
                        console.error('加载插件趋势数据出错:', error);
                        this.$message.error('加载插件趋势数据出错');
                    });
            },
            renderPluginTrendChart(trendData, pluginName) {
                const ctx = document.getElementById('pluginTrendChart').getContext('2d');
                
                // 销毁旧图表
                if (this.charts.pluginTrendChart) {
                    this.charts.pluginTrendChart.destroy();
                }
                
                // 准备数据
                const labels = trendData.map(item => item.stat_date);
                const data = trendData.map(item => item.total_calls);
                
                // 创建新图表
                this.charts.pluginTrendChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: `${pluginName} 调用次数`,
                            data: data,
                            fill: false,
                            backgroundColor: 'rgba(153, 102, 255, 0.6)',
                            borderColor: 'rgba(153, 102, 255, 1)',
                            tension: 0.1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }
    });
</script>
{% endblock %}