{% 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="userStats"{% endraw %} style="width: 100%" border>
                    <el-table-column prop="user_id" label="用户ID"></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="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" {% raw %}@click="viewUserDetail(scope.row)"{% endraw %}>查看详情</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 {
                userStats: []
            }
        },
        mounted() {
            this.currentView = '3';
            this.loadData();
        },
        methods: {
            loadData() {
                const days = parseInt(this.timeRange);
                this.loadUserStats(days);
            },
            loadUserStats(days) {
                axios.get(`/api/user_stats?days=${days}&limit=20`)
                    .then(response => {
                        if (response.data.success) {
                            this.userStats = response.data.data || [];
                        }
                    })
                    .catch(error => {
                        console.error('加载用户统计数据出错:', error);
                        this.$message.error('加载用户统计数据出错');
                    });
            },
            viewUserDetail(user) {
                this.$message.info('用户详情功能开发中');
            }
        }
    });
</script>
{% endblock %}