<template>
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        :width="width"
        class="file-history-dialog"
        @close="handleClose"
    >
        <el-table
            :data="dataList"
            v-loading="loading"
            class="file-history-table"
        >
            <el-table-column prop="fileName" label="文件名" min-width="200" fixed="left">
                <template #default="{ row }">
                    <div class="file-name-cell">
                        <el-icon class="file-icon"><Document /></el-icon>
                        <span>{{ row.fileName }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="version" label="版本" width="80" align="center">
                <template #default="{ row }">
                    <el-tag size="small">v{{ row.version }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小" width="100" align="center">
                <template #default="{ row }">
                    {{ formatFileSize(row.fileSize) }}
                </template>
            </el-table-column>
            <el-table-column prop="uploaderName" label="上传人员" width="120" />
            <el-table-column prop="createTime" label="上传时间" width="180" />
            <el-table-column label="操作" :width="actionColumnWidth" align="center" fixed="right">
                <template #default="{ row }">
                    <div class="action-buttons">
                        <el-button
                            v-if="showPreview"
                            type="primary"
                            link
                            size="small"
                            @click="handlePreview(row)"
                        >
                            <el-icon><View /></el-icon>预览
                        </el-button>
                        <el-button
                            v-if="showDownload"
                            type="success"
                            link
                            size="small"
                            @click="handleDownload(row)"
                        >
                            <el-icon><Download /></el-icon>下载
                        </el-button>
                        <template v-for="action in customActions" :key="action.key">
                            <el-button
                                :type="action.type || 'primary'"
                                link
                                size="small"
                                @click="handleCustomAction(action.key, row)"
                            >
                                <el-icon v-if="action.icon"><component :is="action.icon" /></el-icon>
                                {{ action.label }}
                            </el-button>
                        </template>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { FileText as Document, Eye as View, Download } from 'lucide-vue-next'
import type { KnowledgeFileVO } from '@/types/ai'

export interface FileAction {
    key: string
    label: string
    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
    icon?: any
}

interface Props {
    modelValue: boolean
    title?: string
    width?: string
    data?: KnowledgeFileVO[]
    loading?: boolean
    showPreview?: boolean
    showDownload?: boolean
    customActions?: FileAction[]
}

const props = withDefaults(defineProps<Props>(), {
    title: '历史版本',
    width: '800px',
    data: () => [],
    loading: false,
    showPreview: true,
    showDownload: true,
    customActions: () => []
})

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'close'): void
    (e: 'preview', file: KnowledgeFileVO): void
    (e: 'download', file: KnowledgeFileVO): void
    (e: 'action', key: string, file: KnowledgeFileVO): void
}>()

const dialogVisible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
})

const dataList = computed(() => props.data)

const actionColumnWidth = computed(() => {
    let width = 0
    if (props.showPreview) width += 60
    if (props.showDownload) width += 60
    width += props.customActions.length * 70
    return Math.max(width, 120)
})

const formatFileSize = (size?: number) => {
    if (!size) return '-'
    if (size < 1024) return size + ' B'
    if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
    return (size / 1024 / 1024).toFixed(1) + ' MB'
}

const handleClose = () => {
    emit('close')
}

const handlePreview = (row: KnowledgeFileVO) => {
    emit('preview', row)
}

const handleDownload = (row: KnowledgeFileVO) => {
    emit('download', row)
}

const handleCustomAction = (key: string, row: KnowledgeFileVO) => {
    emit('action', key, row)
}
</script>

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