{% extends "base.html" %}

{% block title %}微信日志查看{% endblock %}

{% block content %}
<div>
    <h1>微信日志查看</h1>
    
    <el-card class="log-card">
        <div slot="header" class="clearfix">
            <span>日志查看</span>
            <el-radio-group v-model="logType" size="small" style="margin-left: 20px;" @change="loadLogs">
                <el-radio-button label="info">信息日志</el-radio-button>
                <el-radio-button label="error">错误日志</el-radio-button>
            </el-radio-group>
            <el-select v-model="logLines" size="small" style="margin-left: 20px;" @change="loadLogs">
                <el-option label="最近100行" :value="100"></el-option>
                <el-option label="最近500行" :value="500"></el-option>
                <el-option label="最近1000行" :value="1000"></el-option>
            </el-select>
            <el-button style="float: right; padding: 3px 0" type="text" @click="loadLogs">刷新</el-button>
        </div>
        
        <div v-loading="loading">
            <div v-if="logContent.length > 0" class="log-content">
                <pre>{{ logContent.join('') }}</pre>
            </div>
            <div v-else class="empty-log">
                <el-empty description="暂无日志内容"></el-empty>
            </div>
        </div>
    </el-card>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                loading: false,
                logType: 'info',
                logLines: 100,
                logContent: [],
                currentView: '9' // 设置当前菜单项
            }
        },
        mounted() {
            this.loadLogs();
        },
        methods: {
            loadLogs() {
                this.loading = true;
                axios.get(`/api/wx_logs?type=${this.logType}&lines=${this.logLines}`)
                    .then(response => {
                        if (response.data.success) {
                            this.logContent = response.data.data.content || [];
                        } else {
                            this.$message.error('加载日志失败');
                        }
                    })
                    .catch(error => {
                        console.error('加载日志出错:', error);
                        this.$message.error('加载日志出错');
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            }
        }
    });
</script>

<style>
    .log-card {
        margin-bottom: 20px;
    }
    
    .log-content {
        max-height: 600px;
        overflow-y: auto;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 4px;
    }
    
    .log-content pre {
        margin: 0;
        white-space: pre-wrap;
        word-break: break-all;
        font-family: monospace;
    }
    
    .empty-log {
        padding: 40px 0;
    }
</style>
{% endblock %}