<template>
    <AdminLayout title="系统日志" info="查看系统配置变更与异常信息">
        <template #action>
            <el-button type="primary" @click="exportLogs">
                <el-icon><Download /></el-icon>
                导出日志
            </el-button>
        </template>

        <div class="log-container">
            <!-- 筛选区域 -->
            <el-card class="filter-card">
                <div class="ticket-filters">
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 280px;" />

                    <div class="filter-right">
                        <el-select v-model="levelFilter" placeholder="日志级别" clearable style="width: 120px;">
                            <el-option label="DEBUG" value="debug" />
                            <el-option label="INFO" value="info" />
                            <el-option label="WARN" value="warn" />
                            <el-option label="ERROR" value="error" />
                        </el-select>
                        <el-select v-model="moduleFilter" placeholder="模块" clearable style="width: 120px;">
                            <el-option label="认证" value="auth" />
                            <el-option label="工单" value="workcase" />
                            <el-option label="知识库" value="knowledge" />
                            <el-option label="AI服务" value="ai" />
                        </el-select>
                        <el-input v-model="searchKeyword" placeholder="搜索日志内容" style="width: 200px;" :prefix-icon="Search" clearable />
                    </div>
                </div>
            </el-card>

            <!-- 日志列表 -->
            <el-card>
                <el-table :data="filteredLogs" style="width: 100%">
                    <el-table-column prop="logId" label="日志ID" width="120">
                        <template #default="{ row }">
                            <span style="color: #409eff; font-weight: 500;">{{ row.logId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="级别" width="80">
                        <template #default="{ row }">
                            <el-tag :type="getLevelType(row.level)" size="small">
                                {{ row.level.toUpperCase() }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="module" label="模块" width="100" />
                    <el-table-column prop="message" label="日志内容" min-width="250" />
                    <el-table-column prop="timestamp" label="时间" width="160" />
                    <el-table-column prop="source" label="来源" width="120" />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button type="primary" link size="small" @click="viewDetail(row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination">
                    <el-pagination v-model:current-page="currentPage" :page-size="10" :total="logs.length" layout="total, prev, pager, next" />
                </div>
            </el-card>
        </div>

        <!-- 日志详情弹窗 -->
        <el-dialog v-model="showDetailDialog" title="日志详情" width="700px">
            <el-form v-if="selectedLog" label-width="100px">
                <el-form-item label="日志ID">
                    <span>{{ selectedLog.logId }}</span>
                </el-form-item>
                <el-form-item label="级别">
                    <el-tag :type="getLevelType(selectedLog.level)">{{ selectedLog.level.toUpperCase() }}</el-tag>
                </el-form-item>
                <el-form-item label="模块">
                    <span>{{ selectedLog.module }}</span>
                </el-form-item>
                <el-form-item label="日志内容">
                    <span>{{ selectedLog.message }}</span>
                </el-form-item>
                <el-form-item label="时间">
                    <span>{{ selectedLog.timestamp }}</span>
                </el-form-item>
                <el-form-item label="来源">
                    <span>{{ selectedLog.source }}</span>
                </el-form-item>
                <el-form-item v-if="selectedLog.stackTrace" label="堆栈跟踪">
                    <div style="background: #f5f7fa; padding: 10px; border-radius: 4px; max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 12px;">
                        {{ selectedLog.stackTrace }}
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { Download, Search } from 'lucide-vue-next'
import { ElMessage } from 'element-plus'

const dateRange = ref<[Date, Date] | null>(null)
const levelFilter = ref('')
const moduleFilter = ref('')
const searchKeyword = ref('')
const currentPage = ref(1)
const showDetailDialog = ref(false)
const selectedLog = ref<any>(null)

const logs = ref([
    { logId: 'LOG001', level: 'info', module: '认证', message: '用户 admin 登录成功', timestamp: '2024-12-13 10:30:15', source: '192.168.1.100', stackTrace: null },
    { logId: 'LOG002', level: 'info', module: '工单', message: '工单 TK001 创建成功', timestamp: '2024-12-13 10:31:20', source: '192.168.1.101', stackTrace: null },
    { logId: 'LOG003', level: 'warn', module: '知识库', message: '文件上传超时，已重试', timestamp: '2024-12-13 10:32:45', source: '192.168.1.102', stackTrace: null },
    { logId: 'LOG004', level: 'error', module: 'AI服务', message: '调用 GPT-4 API 失败：连接超时', timestamp: '2024-12-13 10:33:50', source: '192.168.1.103', stackTrace: 'java.net.SocketTimeoutException: Connection timeout\n  at com.example.ai.GptClient.call(GptClient.java:45)\n  at com.example.service.AiService.process(AiService.java:120)' },
    { logId: 'LOG005', level: 'debug', module: '工单', message: '工单状态更新：pending -> processing', timestamp: '2024-12-13 10:34:30', source: '192.168.1.100', stackTrace: null }
])

const filteredLogs = computed(() => {
    let result = logs.value
    if (levelFilter.value) {
        result = result.filter(l => l.level === levelFilter.value)
    }
    if (moduleFilter.value) {
        result = result.filter(l => l.module === moduleFilter.value)
    }
    if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        result = result.filter(l =>
            l.message.toLowerCase().includes(keyword) ||
            l.module.toLowerCase().includes(keyword)
        )
    }
    return result.slice((currentPage.value - 1) * 10, currentPage.value * 10)
})

const getLevelType = (level: string) => {
    const map: Record<string, string> = {
        debug: 'info',
        info: 'success',
        warn: 'warning',
        error: 'danger'
    }
    return map[level] || 'info'
}

const viewDetail = (row: any) => {
    selectedLog.value = row
    showDetailDialog.value = true
}

const exportLogs = () => {
    ElMessage.success('日志导出成功')
}
</script>

<style lang="scss" scoped>
@import url("./SystemLogView.scss");

.log-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
</style>