<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;"
                        @change="handleSearch"
                    />

                    <div class="filter-right">
                        <el-select v-model="filter.action" placeholder="操作类型" clearable style="width: 140px;" @change="handleSearch">
                            <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="filter.knowledgeId" placeholder="知识库" clearable style="width: 180px;" @change="handleSearch">
                            <el-option 
                                v-for="kb in knowledgeList" 
                                :key="kb.knowledgeId" 
                                :label="kb.title" 
                                :value="kb.knowledgeId" 
                            />
                        </el-select>
                        <el-input 
                            v-model="filter.fileName" 
                            placeholder="搜索文件名" 
                            style="width: 200px;" 
                            :prefix-icon="Search" 
                            clearable 
                            @clear="handleSearch"
                            @keyup.enter="handleSearch"
                        />
                    </div>
                </div>
            </el-card>

            <!-- 日志列表 -->
            <el-card v-loading="loading">
                <el-table :data="logs" style="width: 100%">
                    <el-table-column prop="logId" label="日志ID" width="180">
                        <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" show-overflow-tooltip />
                    <el-table-column prop="action" label="操作类型" width="100">
                        <template #default="{ row }">
                            <el-tag :type="getOperationType(row.action)" size="small">
                                {{ getOperationName(row.action) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="version" label="版本" width="80">
                        <template #default="{ row }">
                            <span>v{{ row.version || 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="creatorName" label="操作人" width="120" />
                    <el-table-column prop="createTime" label="操作时间" width="180">
                        <template #default="{ row }">
                            {{ formatTime(row.createTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" 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="pagination.page" 
                        v-model:page-size="pagination.pageSize"
                        :page-sizes="[10, 20, 50]"
                        :total="pagination.total" 
                        layout="total, sizes, prev, pager, next"
                        @size-change="loadLogs"
                        @current-change="loadLogs"
                    />
                </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.action)">{{ getOperationName(selectedLog.action) }}</el-tag>
                </el-form-item>
                <el-form-item label="文件版本">
                    <span>v{{ selectedLog.version || 1 }}</span>
                </el-form-item>
                <el-form-item label="操作人">
                    <span>{{ selectedLog.creatorName }}</span>
                </el-form-item>
                <el-form-item label="操作时间">
                    <span>{{ formatTime(selectedLog.createTime) }}</span>
                </el-form-item>
                <el-form-item label="知识库ID">
                    <span>{{ selectedLog.knowledgeId }}</span>
                </el-form-item>
                <el-form-item label="文件ID">
                    <span>{{ selectedLog.fileId }}</span>
                </el-form-item>
            </el-form>
        </el-dialog>
    </AdminLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import AdminLayout from '@/views/admin/AdminLayout.vue'
import { Download, Search } from 'lucide-vue-next'
import { ElMessage } from 'element-plus'
import { aiKnowledgeAPI } from 'shared/api/ai'
import type { TbKnowledgeFileLog, TbKnowledge } from 'shared/types'

const loading = ref(false)
const dateRange = ref<[Date, Date] | null>(null)
const showDetailDialog = ref(false)
const selectedLog = ref<TbKnowledgeFileLog | null>(null)

// 筛选条件
const filter = reactive<TbKnowledgeFileLog>({
    action: '',
    knowledgeId: '',
    fileName: '',
    service: 'workcase'
})

// 分页
const pagination = reactive({
    page: 1,
    pageSize: 10,
    total: 0
})

// 日志列表
const logs = ref<TbKnowledgeFileLog[]>([])

// 知识库列表（用于筛选）
const knowledgeList = ref<TbKnowledge[]>([])

// 操作类型映射
const operationTypeMap: Record<string, string> = {
    upload: 'success',
    download: 'info',
    delete: 'danger',
    update: 'warning'
}

const operationNameMap: Record<string, string> = {
    upload: '上传',
    download: '下载',
    delete: '删除',
    update: '更新'
}

const getOperationType = (action: string) => operationTypeMap[action] || 'info'
const getOperationName = (action: string) => operationNameMap[action] || action

// 格式化时间
const formatTime = (time?: string | number): string => {
    if (!time) return '-'
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}

// 加载知识库列表
const loadKnowledgeList = async () => {
    try {
        const result = await aiKnowledgeAPI.listKnowledges({})
        if (result.success && result.dataList) {
            knowledgeList.value = result.dataList
        }
    } catch (error) {
        console.error('加载知识库列表失败:', error)
    }
}

// 加载日志列表
const loadLogs = async () => {
    loading.value = true
    try {
        // 构建查询条件
        const queryFilter: TbKnowledgeFileLog = { ...filter }
        console.log(queryFilter)
        // 处理日期范围
        if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
            queryFilter.createTimeStart = dateRange.value[0].toISOString()
            queryFilter.createTimeEnd = dateRange.value[1].toISOString()
        }

        const result = await aiKnowledgeAPI.getFileLogPage({
            filter: queryFilter,
            pageParam: {
                page: pagination.page,
                pageSize: pagination.pageSize,
                total: 0
            }
        })

        if (result.success) {
            logs.value = result.dataList || []
            pagination.total = result.pageParam?.total || 0
        } else {
            ElMessage.error(result.message || '加载日志失败')
        }
    } catch (error) {
        console.error('加载日志失败:', error)
        ElMessage.error('加载日志失败')
    } finally {
        loading.value = false
    }
}

// 搜索
const handleSearch = () => {
    pagination.page = 1
    loadLogs()
}

// 查看详情
const viewDetail = (row: TbKnowledgeFileLog) => {
    selectedLog.value = row
    showDetailDialog.value = true
}

// 导出日志
const exportLogs = () => {
    ElMessage.success('日志导出功能开发中')
}

onMounted(() => {
    loadKnowledgeList()
    loadLogs()
})
</script>

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

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