{% 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%">
        <el-descriptions :column="1" border>
            <el-descriptions-item label="插件名称">{{ errorDetail.plugin_name }}</el-descriptions-item>
            <el-descriptions-item label="命令">{{ errorDetail.command }}</el-descriptions-item>
            <el-descriptions-item label="用户ID">{{ errorDetail.user_id }}</el-descriptions-item>
            <el-descriptions-item label="群组ID">{{ errorDetail.group_id || '私聊' }}</el-descriptions-item>
            <el-descriptions-item label="错误信息">{{ errorDetail.error_message }}</el-descriptions-item>
            <el-descriptions-item label="时间">{{ errorDetail.created_at }}</el-descriptions-item>
            <el-descriptions-item label="堆栈跟踪">
                <pre style="white-space: pre-wrap; word-wrap: break-word; max-height: 300px; overflow-y: auto;">{{ errorDetail.stack_trace }}</pre>
            </el-descriptions-item>
        </el-descriptions>
    </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 %}