<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="operationFilter" placeholder="操作类型" clearable style="width: 140px;">
                            <el-option label="上传" value="upload" />
                            <el-option label="下载" value="download" />
                            <el-option label="删除" value="delete" />
                            <el-option label="更新" value="update" />
                        </el-select>
                        <el-select v-model="kbTypeFilter" placeholder="知识库类型" clearable style="width: 140px;">
                            <el-option label="外部知识库" value="external" />
                            <el-option label="内部知识库" value="internal" />
                        </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="fileName" label="文件名" min-width="200" />
                    <el-table-column prop="operation" label="操作类型" width="100">
                        <template #default="{ row }">
                            <el-tag :type="getOperationType(row.operation)" size="small">
                                {{ row.operationName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="kbType" label="知识库" width="100">
                        <template #default="{ row }">
                            <span>{{ row.kbType === 'external' ? '外部' : '内部' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operator" label="操作人" width="100" />
                    <el-table-column prop="operationTime" label="操作时间" width="160" />
                    <el-table-column prop="fileSize" label="文件大小" width="100" />
                    <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="600px">
            <el-form v-if="selectedLog" label-width="100px">
                <el-form-item label="日志ID">
                    <span>{{ selectedLog.logId }}</span>
                </el-form-item>
                <el-form-item label="文件名">
                    <span>{{ selectedLog.fileName }}</span>
                </el-form-item>
                <el-form-item label="操作类型">
                    <el-tag :type="getOperationType(selectedLog.operation)">{{ selectedLog.operationName }}</el-tag>
                </el-form-item>
                <el-form-item label="知识库">
                    <span>{{ selectedLog.kbType === 'external' ? '外部知识库' : '内部知识库' }}</span>
                </el-form-item>
                <el-form-item label="操作人">
                    <span>{{ selectedLog.operator }}</span>
                </el-form-item>
                <el-form-item label="操作时间">
                    <span>{{ selectedLog.operationTime }}</span>
                </el-form-item>
                <el-form-item label="文件大小">
                    <span>{{ selectedLog.fileSize }}</span>
                </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 operationFilter = ref('')
const kbTypeFilter = ref('')
const searchKeyword = ref('')
const currentPage = ref(1)
const showDetailDialog = ref(false)
const selectedLog = ref<any>(null)

const logs = ref([
    { logId: 'LOG001', fileName: 'TH-500GF操作手册.pdf', operation: 'upload', operationName: '上传', kbType: 'external', operator: '张三', operationTime: '2024-12-10 14:30', fileSize: '2.5MB' },
    { logId: 'LOG002', fileName: 'TH-300D故障排查指南.pdf', operation: 'upload', operationName: '上传', kbType: 'external', operator: '李四', operationTime: '2024-12-09 10:15', fileSize: '1.8MB' },
    { logId: 'LOG003', fileName: '内部技术规范v2.0.pdf', operation: 'update', operationName: '更新', kbType: 'internal', operator: '赵六', operationTime: '2024-12-11 16:20', fileSize: '3.2MB' },
    { logId: 'LOG004', fileName: '售后服务流程.pdf', operation: 'download', operationName: '下载', kbType: 'internal', operator: '孙七', operationTime: '2024-12-10 11:00', fileSize: '1.1MB' },
    { logId: 'LOG005', fileName: '员工培训手册.pdf', operation: 'delete', operationName: '删除', kbType: 'internal', operator: '周八', operationTime: '2024-12-09 15:30', fileSize: '2.0MB' }
])

const filteredLogs = computed(() => {
    let result = logs.value
    if (operationFilter.value) {
        result = result.filter(l => l.operation === operationFilter.value)
    }
    if (kbTypeFilter.value) {
        result = result.filter(l => l.kbType === kbTypeFilter.value)
    }
    if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        result = result.filter(l =>
            l.fileName.toLowerCase().includes(keyword) ||
            l.operator.toLowerCase().includes(keyword)
        )
    }
    return result.slice((currentPage.value - 1) * 10, currentPage.value * 10)
})

const getOperationType = (operation: string) => {
    const map: Record<string, string> = {
        upload: 'success',
        download: 'info',
        delete: 'danger',
        update: 'warning'
    }
    return map[operation] || 'info'
}

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

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

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

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