{% 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 :data="errorLogs" style="width: 100%" border>
                    <el-table-column prop="plugin_name" label="插件名称"></el-table-column>
                    <el-table-column prop="command" label="命令"></el-table-column>
                    <el-table-column prop="error_message" label="错误信息" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="created_at" label="时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="viewErrorDetail(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container" style="margin-top: 20px; text-align: right;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalErrors">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>
    </el-row>
    
    <!-- 错误详情对话框 -->
    <el-dialog title="错误详情" :visible.sync="errorDetailVisible" width="70%">
        <div>
            <p><strong>插件名称:</strong> {% raw %}{{ errorDetail.plugin_name }}{% endraw %}</p>
            <p><strong>命令:</strong> {% raw %}{{ errorDetail.command }}{% endraw %}</p>
            <p><strong>用户ID:</strong> {% raw %}{{ errorDetail.user_id }}{% endraw %}</p>
            <p><strong>群组ID:</strong> {% raw %}{{ errorDetail.group_id || '无' }}{% endraw %}</p>
            <p><strong>时间:</strong> {% raw %}{{ errorDetail.created_at }}{% endraw %}</p>
            <p><strong>错误信息:</strong> {% raw %}{{ errorDetail.error_message }}{% endraw %}</p>
            <div v-if="errorDetail.stack_trace">
                <p><strong>堆栈跟踪:</strong></p>
                <pre>{% raw %}{{ errorDetail.stack_trace }}{% endraw %}</pre>
            </div>
        </div>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                errorLogs: [],
                errorDetail: {},
                errorDetailVisible: false,
                currentPage: 1,
                pageSize: 20,
                totalErrors: 0
            }
        },
        mounted() {
            this.currentView = '5';
            this.loadData();
        },
        methods: {
            loadData() {
                const days = parseInt(this.timeRange);
                this.loadErrorLogs(days);
            },
            loadErrorLogs(days) {
                axios.get(`/api/error_logs?days=${days}&limit=${this.pageSize}&offset=${(this.currentPage - 1) * this.pageSize}`)
                    .then(response => {
                        if (response.data.success) {
                            this.errorLogs = response.data.data.logs || [];
                            this.totalErrors = response.data.data.total || 0;
                        }
                    })
                    .catch(error => {
                        console.error('加载错误日志出错:', error);
                        this.$message.error('加载错误日志出错');
                    });
            },
            viewErrorDetail(error) {
                // 如果已有错误ID，直接加载详情
                if (error.id) {
                    this.loadErrorDetail(error.id);
                } else {
                    // 否则直接显示当前行的数据
                    this.errorDetail = error;
                    this.errorDetailVisible = true;
                }
            },
            loadErrorDetail(errorId) {
                axios.get(`/api/error_detail/${errorId}`)
                    .then(response => {
                        if (response.data.success) {
                            this.errorDetail = response.data.data || {};
                            this.errorDetailVisible = true;
                        }
                    })
                    .catch(error => {
                        console.error('加载错误详情出错:', error);
                        this.$message.error('加载错误详情出错');
                    });
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.currentPage = 1; // 重置到第一页
                this.loadData();
            },
            handleCurrentChange(page) {
                this.currentPage = page;
                this.loadData();
            }
        }
    });
</script>
{% endblock %}