{% extends "base.html" %}

{% block title %}群组统计 - 机器人管理后台{% endblock %}

{% block content %}
<!-- 群组统计 -->
<div>
    <el-row :gutter="20">
        <el-col :span="24">
            <el-card shadow="hover">
                <div slot="header">
                    <span>群组活跃度排行</span>
                </div>
                <el-table {% raw %}:data="groupStats"{% endraw %} style="width: 100%" border>
                    <el-table-column label="群组信息">
                        <template slot-scope="scope">
                            {% raw %}{{ scope.row.group_name || scope.row.group_id }} ({{ scope.row.group_id }}){% endraw %}
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_calls" label="调用次数" sortable></el-table-column>
                    <el-table-column prop="used_plugins" label="使用插件数" sortable></el-table-column>
                    <el-table-column prop="unique_users" label="唯一用户数" sortable></el-table-column>
                    <el-table-column prop="success_calls" label="成功次数" sortable></el-table-column>
                    <el-table-column prop="failed_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="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="viewGroupDetail(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                groupStats: []
            }
        },
        mounted() {
            this.currentView = '4';
            this.loadData();
        },
        methods: {
            loadData() {
                const days = parseInt(this.timeRange);
                this.loadGroupStats(days);
            },
            loadGroupStats(days) {
                axios.get(`/api/group_stats?days=${days}&limit=20`)
                    .then(response => {
                        if (response.data.success) {
                            this.groupStats = response.data.data || [];
                        }
                    })
                    .catch(error => {
                        console.error('加载群组统计数据出错:', error);
                        this.$message.error('加载群组统计数据出错');
                    });
            },
            viewGroupDetail(group) {
                this.$message.info('群组详情功能开发中');
            }
        }
    });
</script>
{% endblock %}