<script lang="ts" setup>
import type { FormInstance } from "element-plus"
import DocumentParseProgress from "@/layouts/components/DocumentParseProgress/index.vue"
import {
  deleteDocumentApi,
  getDocumentListApi,
  getFileListApi,
  runDocumentParseApi
} from "@@/apis/kbs/document"
import {
  batchDeleteKnowledgeBaseApi,
  createKnowledgeBaseApi,
  deleteKnowledgeBaseApi,
  getKnowledgeBaseListApi,
  getSystemEmbeddingConfigApi,
  setSystemEmbeddingConfigApi
} from "@@/apis/kbs/knowledgebase"
import { usePagination } from "@@/composables/usePagination"
import { CaretRight, Delete, Plus, Refresh, Search, Setting, View } from "@element-plus/icons-vue"
import axios from "axios"
import { ElMessage, ElMessageBox } from "element-plus"
import { nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref, watch } from "vue"
import "element-plus/dist/index.css"
import "element-plus/theme-chalk/el-message-box.css"
import "element-plus/theme-chalk/el-message.css"

defineOptions({
  // 命名当前组件
  name: "KnowledgeBase"
})

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const createDialogVisible = ref(false)
const uploadLoading = ref(false)
const showParseProgress = ref(false)
const currentDocId = ref("")

// 添加清理函数
function cleanupResources() {
  // 重置所有状态
  if (multipleSelection.value) {
    multipleSelection.value = []
  }

  loading.value = false
  documentLoading.value = false
  fileLoading.value = false
  uploadLoading.value = false

  // 关闭所有对话框
  viewDialogVisible.value = false
  createDialogVisible.value = false
  addDocumentDialogVisible.value = false
  showParseProgress.value = false
}

// 在组件停用时清理资源
onDeactivated(() => {
  cleanupResources()
})

// 在组件卸载前清理资源
onBeforeUnmount(() => {
  cleanupResources()
})

// 定义知识库数据类型
interface KnowledgeBaseData {
  id: string
  name: string
  description: string
  doc_num: number
  create_time: number
  create_date: string
  avatar?: string
  language: string
  permission: string
  chunk_num: number
  token_num: number
}

// 新建知识库表单
const knowledgeBaseForm = reactive({
  name: "",
  description: "",
  language: "Chinese",
  permission: "me"
})

// 定义API返回数据的接口
interface FileListResponse {
  list: any[]
  total: number
}

interface ApiResponse<T> {
  data: T
  code: number
  message: string
}

interface ListResponse {
  list: any[]
  total: number
}

// 表单验证规则
const knowledgeBaseFormRules = {
  name: [
    { required: true, message: "请输入知识库名称", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
  ],
  description: [
    { max: 200, message: "描述不能超过200个字符", trigger: "blur" }
  ]
}

const knowledgeBaseFormRef = ref<FormInstance | null>(null)

// 查询知识库列表
const tableData = ref<KnowledgeBaseData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  name: ""
})

// 存储多选的表格数据
const multipleSelection = ref<KnowledgeBaseData[]>([])

// 获取知识库列表数据
function getTableData() {
  loading.value = true
  // 调用获取知识库列表API
  getKnowledgeBaseListApi({
    currentPage: paginationData.currentPage,
    size: paginationData.pageSize,
    name: searchData.name
  }).then((response) => {
    const result = response as ApiResponse<ListResponse>
    paginationData.total = result.data.total
    tableData.value = result.data.list
    // 清空选中数据
    multipleSelection.value = []
  }).catch(() => {
    tableData.value = []
  }).finally(() => {
    loading.value = false
  })
}

// 搜索处理
function handleSearch() {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}

// 重置搜索
function resetSearch() {
  searchFormRef.value?.resetFields()
  handleSearch()
}

// 打开新建知识库对话框
function handleCreate() {
  createDialogVisible.value = true
}

// 提交新建知识库
async function submitCreate() {
  if (!knowledgeBaseFormRef.value) return

  await knowledgeBaseFormRef.value.validate(async (valid) => {
    if (valid) {
      uploadLoading.value = true
      try {
        await createKnowledgeBaseApi(knowledgeBaseForm)
        ElMessage.success("知识库创建成功")
        getTableData()
        createDialogVisible.value = false
        // 重置表单
        knowledgeBaseFormRef.value?.resetFields()
      } catch (error: unknown) {
        let errorMessage = "创建失败"
        if (error instanceof Error) {
          errorMessage += `: ${error.message}`
        }
        ElMessage.error(errorMessage)
      } finally {
        uploadLoading.value = false
      }
    }
  })
}

// 查看知识库详情
const viewDialogVisible = ref(false)
const currentKnowledgeBase = ref<KnowledgeBaseData | null>(null)
const documentLoading = ref(false)
const documentList = ref<any[]>([])

// 文档列表分页
const docPaginationData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50, 100],
  layout: "total, sizes, prev, pager, next, jumper"
})

// 处理文档分页变化
function handleDocCurrentChange(page: number) {
  docPaginationData.currentPage = page
  getDocumentList()
}

function handleDocSizeChange(size: number) {
  docPaginationData.pageSize = size
  docPaginationData.currentPage = 1
  getDocumentList()
}

// 获取知识库下的文档列表
function getDocumentList() {
  if (!currentKnowledgeBase.value) return

  documentLoading.value = true
  getDocumentListApi({
    kb_id: currentKnowledgeBase.value.id,
    currentPage: docPaginationData.currentPage,
    size: docPaginationData.pageSize,
    name: ""
  }).then((response) => {
    const result = response as ApiResponse<ListResponse>
    documentList.value = result.data.list
    docPaginationData.total = result.data.total
  }).catch((error) => {
    ElMessage.error(`获取文档列表失败: ${error?.message || "未知错误"}`)
    documentList.value = []
  }).finally(() => {
    documentLoading.value = false
  })
}

// 修改handleView方法
function handleView(row: KnowledgeBaseData) {
  currentKnowledgeBase.value = row
  viewDialogVisible.value = true
  // 重置文档分页
  docPaginationData.currentPage = 1
  // 获取文档列表
  getDocumentList()
}

// 格式化解析状态
function formatParseStatus(progress: number) {
  if (progress === 0) return "未解析"
  if (progress === 1) return "已完成"
  return `解析中 ${Math.floor(progress * 100)}%`
}

// 获取解析状态对应的标签类型
function getParseStatusType(progress: number) {
  if (progress === 0) return "info"
  if (progress === 1) return "success"
  return "warning"
}

// 修改 handleParseDocument 方法
function handleParseDocument(row: any) {
  // 先判断是否已完成解析
  if (row.progress === 1) {
    ElMessage.warning("文档已完成解析，无需再重复解析")
    return
  }

  ElMessageBox.confirm(
    `确定要解析文档 "${row.name}" 吗？`,
    "解析确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info"
    }
  ).then(() => {
    runDocumentParseApi(row.id)
      .then(() => {
        ElMessage.success("解析任务已提交")
        // 设置当前文档ID并显示解析进度对话框
        currentDocId.value = row.id
        showParseProgress.value = true
        // 刷新文档列表
        getDocumentList()
      })
      .catch((error) => {
        ElMessage.error(`解析任务提交失败: ${error?.message || "未知错误"}`)
      })
  }).catch(() => {
    // 用户取消操作
  })
}

// 添加解析完成和失败的处理函数
function handleParseComplete() {
  ElMessage.success("文档解析完成")
  getDocumentList() // 刷新文档列表
  getTableData() // 刷新知识库列表（因为文档数量可能变化）
}

function handleParseFailed(error: string) {
  ElMessage.error(`文档解析失败: ${error || "未知错误"}`)
  getDocumentList() // 刷新文档列表以更新状态
}

// 处理移除文档
function handleRemoveDocument(row: any) {
  ElMessageBox.confirm(
    `确定要从知识库中移除文档 "${row.name}" 吗？<br><span style="color: #909399; font-size: 12px;">该操作只是移除知识库文件，不会删除原始文件</span>`,
    "移除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: true
    }
  ).then(() => {
    deleteDocumentApi(row.id)
      .then(() => {
        ElMessage.success("文档已从知识库移除")
        // 刷新文档列表
        getDocumentList()
        // 刷新知识库列表（因为文档数量会变化）
        getTableData()
      })
      .catch((error) => {
        ElMessage.error(`移除文档失败: ${error?.message || "未知错误"}`)
      })
  }).catch(() => {
    // 用户取消操作
  })
}

// 添加文档对话框
const addDocumentDialogVisible = ref(false)
const selectedFiles = ref<string[]>([])
const fileLoading = ref(false)
const fileList = ref<any[]>([])
const filePaginationData = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageSizes: [10, 20, 50, 100],
  layout: "total, sizes, prev, pager, next, jumper"
})

// 处理添加文档
function handleAddDocument() {
  addDocumentDialogVisible.value = true
  // 重置选择
  selectedFiles.value = []
  // 获取文件列表
  getFileList()
}

// 获取文件列表
function getFileList() {
  fileLoading.value = true
  // 调用获取文件列表的API
  getFileListApi({
    currentPage: filePaginationData.currentPage,
    size: filePaginationData.pageSize,
    name: ""
  }).then((response) => {
    const typedResponse = response as ApiResponse<FileListResponse>
    fileList.value = typedResponse.data.list
    filePaginationData.total = typedResponse.data.total
  }).catch((error) => {
    ElMessage.error(`获取文件列表失败: ${error?.message || "未知错误"}`)
    fileList.value = []
  }).finally(() => {
    fileLoading.value = false
  })
}

// 处理文件选择变化
function handleFileSelectionChange(selection: any[]) {
  // 使用Array.from和JSON方法双重确保转换为普通数组
  selectedFiles.value = JSON.parse(JSON.stringify(Array.from(selection).map(item => item.id)))
}

// 添加一个请求锁变量
const isAddingDocument = ref(false)
const messageShown = ref(false) // 添加这一行，将 messageShown 提升为组件级别的变量

// 修改 confirmAddDocument 函数
async function confirmAddDocument() {
  // 检查是否已经在处理请求
  if (isAddingDocument.value) {
    console.log("正在处理添加文档请求，请勿重复点击")
    return
  }

  if (selectedFiles.value.length === 0) {
    ElMessage.warning("请至少选择一个文件")
    return
  }

  if (!currentKnowledgeBase.value) return

  try {
    // 设置请求锁
    isAddingDocument.value = true
    messageShown.value = false // 重置消息显示标志，使用组件级别的变量
    console.log("开始添加文档请求...", selectedFiles.value)

    // 直接处理文件ID，不再弹出确认对话框
    const fileIds = JSON.parse(JSON.stringify([...selectedFiles.value]))

    // 发送API请求 - 移除不必要的内层 try/catch
    const response = await axios.post(
      `/api/v1/knowledgebases/${currentKnowledgeBase.value.id}/documents`,
      { file_ids: fileIds }
    )

    console.log("API原始响应:", response)

    // 检查响应状态
    if (response.data && (response.data.code === 0 || response.data.code === 201)) {
      // 成功处理
      if (!messageShown.value) {
        messageShown.value = true
        console.log("显示成功消息")
        ElMessage.success("文档添加成功")
      }

      addDocumentDialogVisible.value = false
      getDocumentList()
      getTableData()
    } else {
      // 处理错误响应
      throw new Error(response.data?.message || "添加文档失败")
    }
  } catch (error: any) {
    // API调用失败
    console.error("API请求失败详情:", {
      error: error?.toString(),
      stack: error?.stack,
      response: error?.response?.data,
      request: error?.request,
      config: error?.config
    })

    // 添加更详细的错误日志
    console.log("错误详情:", error)
    if (error.response) {
      console.log("响应数据:", error.response.data)
      console.log("响应状态:", error.response.status)
    }

    ElMessage.error(`添加文档失败: ${error?.message || "未知错误"}`)
  } finally {
    // 无论成功失败，都解除请求锁
    console.log("添加文档请求完成，解除锁定", new Date().toISOString())
    setTimeout(() => {
      isAddingDocument.value = false
    }, 500) // 增加延迟，防止快速点击
  }
}

// 格式化文件大小
function formatFileSize(size: number) {
  if (!size) return "0 B"

  const units = ["B", "KB", "MB", "GB", "TB"]
  let index = 0
  while (size >= 1024 && index < units.length - 1) {
    size /= 1024
    index++
  }

  return `${size.toFixed(2)} ${units[index]}`
}

// 格式化文件类型
function formatFileType(type: string) {
  const typeMap: Record<string, string> = {
    pdf: "PDF",
    doc: "Word",
    docx: "Word",
    xls: "Excel",
    xlsx: "Excel",
    ppt: "PPT",
    pptx: "PPT",
    txt: "文本",
    md: "Markdown",
    jpg: "图片",
    jpeg: "图片",
    png: "图片"
  }

  return typeMap[type.toLowerCase()] || type
}

// 删除知识库
function handleDelete(row: KnowledgeBaseData) {
  ElMessageBox.confirm(
    `确定要删除知识库 "${row.name}" 吗？删除后将无法恢复，且其中的所有文档也将被删除。`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: true,
      center: true,
      customClass: "delete-confirm-dialog",
      distinguishCancelAndClose: true,
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: true,
      roundButton: true,
      beforeClose: (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = "删除中..."

          loading.value = true
          deleteKnowledgeBaseApi(row.id)
            .then(() => {
              ElMessage.success("删除成功")
              getTableData() // 刷新表格数据
              done()
            })
            .catch((error) => {
              ElMessage.error(`删除失败: ${error?.message || "未知错误"}`)
              done()
            })
            .finally(() => {
              instance.confirmButtonLoading = false
              loading.value = false
            })
        } else {
          done()
        }
      }
    }
  ).catch(() => {
    // 用户取消删除操作
  })
}

// 批量删除知识库
function handleBatchDelete() {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请至少选择一个知识库")
    return
  }

  ElMessageBox.confirm(
    `确定要删除选中的 <strong>${multipleSelection.value.length}</strong> 个知识库吗？<br><span style="color: #F56C6C; font-size: 12px;">此操作不可恢复，且其中的所有文档也将被删除</span>`,
    "批量删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      dangerouslyUseHTMLString: true,
      center: true,
      customClass: "delete-confirm-dialog",
      distinguishCancelAndClose: true,
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: true,
      roundButton: true,
      beforeClose: (action, instance, done) => {
        if (action === "confirm") {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = "删除中..."

          loading.value = true
          const ids = multipleSelection.value.map(item => item.id)
          batchDeleteKnowledgeBaseApi(ids)
            .then(() => {
              ElMessage.success(`成功删除 ${multipleSelection.value.length} 个知识库`)
              getTableData() // 刷新表格数据
              done()
            })
            .catch((error) => {
              ElMessage.error(`批量删除失败: ${error?.message || "未知错误"}`)
              done()
            })
            .finally(() => {
              instance.confirmButtonLoading = false
              loading.value = false
            })
        } else {
          done()
        }
      }
    }
  ).catch(() => {
    // 用户取消删除操作
  })
}

// 表格多选事件处理
function handleSelectionChange(selection: KnowledgeBaseData[]) {
  multipleSelection.value = selection
}

// 监听分页参数的变化
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })

// 确保页面挂载和激活时获取数据
onMounted(() => {
  getTableData()
})

// 当从其他页面切换回来时刷新数据
onActivated(() => {
  getTableData()
})

// 系统 Embedding 配置逻辑
const configModalVisible = ref(false)
const configFormRef = ref<FormInstance>() // 表单引用
const configFormLoading = ref(false) // 表单加载状态
const configSubmitLoading = ref(false) // 提交按钮加载状态

const configForm = reactive({
  llm_name: "",
  api_base: "",
  api_key: ""
})

// 简单的 URL 校验规则
function validateUrl(rule: any, value: any, callback: any) {
  if (!value) {
    return callback(new Error("请输入模型 API 地址"))
  }
  // 允许 http, https 开头，允许 IP 地址和域名，允许端口
  // 修正：允许路径，但不允许查询参数或片段
  const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9.-]+|\[[a-fA-F0-9:]+\])(:\d+)?(\/[^?#]*)?$/
  if (!urlPattern.test(value)) {
    callback(new Error("请输入有效的 Base URL (例如 http://host:port 或 https://domain/path)"))
  } else {
    callback()
  }
}

const configFormRules = reactive({
  llm_name: [{ required: true, message: "请输入模型名称", trigger: "blur" }],
  api_base: [{ required: true, validator: validateUrl, trigger: "blur" }]
  // api_key 不是必填项
})

// 显示配置模态框
async function showConfigModal() {
  configModalVisible.value = true
  configFormLoading.value = true
  // 重置表单可能需要在 nextTick 中执行，确保 DOM 更新完毕
  await nextTick()
  configFormRef.value?.resetFields() // 清空上次的输入和校验状态

  try {
    // 确认 API 函数名称是否正确，并添加类型断言
    const res = await getSystemEmbeddingConfigApi() as ApiResponse<{ llm_name?: string, api_base?: string, api_key?: string }>
    if (res.code === 0 && res.data) {
      configForm.llm_name = res.data.llm_name || ""
      configForm.api_base = res.data.api_base || ""
      // 注意：API Key 通常不应在 GET 请求中返回，如果后端不返回，这里会是空字符串
      configForm.api_key = res.data.api_key || ""
    } else if (res.code !== 0) {
      ElMessage.error(res.message || "获取配置失败")
    } else {
      // code === 0 但 data 为空，说明没有配置
      console.log("当前未配置编码模型。")
    }
  } catch (error: any) {
    ElMessage.error(error.message || "获取配置请求失败")
    console.error("获取配置失败:", error)
  } finally {
    configFormLoading.value = false
  }
}

// 处理模态框关闭
function handleModalClose() {
  // 可以在这里再次重置表单，以防用户未保存直接关闭
  configFormRef.value?.resetFields()
}

// 处理配置提交
async function handleConfigSubmit() {
  if (!configFormRef.value) return
  // 使用 .then() .catch() 处理 validate 的 Promise
  configFormRef.value.validate().then(async () => {
    // 验证通过
    configSubmitLoading.value = true
    try {
      const payload = {
        llm_name: configForm.llm_name.trim(),
        api_base: configForm.api_base.trim(),
        api_key: configForm.api_key
      }
      // 确认 API 函数名称是否正确，并添加类型断言
      const res = await setSystemEmbeddingConfigApi(payload) as ApiResponse<any> // 使用类型断言并指定泛型参数为any
      if (res.code === 0) {
        ElMessage.success("连接验证成功！")
        configModalVisible.value = false
      } else {
        // 后端应在 res.message 中返回错误信息，包括连接测试失败的原因
        ElMessage.error(res.message || "连接验证失败")
      }
    } catch (error: any) {
      ElMessage.error(error.message || "连接验证请求失败")
      console.error("连接验证失败:", error)
    } finally {
      configSubmitLoading.value = false
    }
  }).catch((errorFields) => {
    // 验证失败
    console.log("表单验证失败!", errorFields)
    // 这里不需要返回 false，validate 的 Promise reject 就表示失败了
  })
}
</script>

<template>
  <div>
    <div class="app-container">
      <el-card v-loading="loading" shadow="never" class="search-wrapper">
        <el-form ref="searchFormRef" :inline="true" :model="searchData">
          <el-form-item prop="name" label="知识库名称">
            <el-input v-model="searchData.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleSearch">
              搜索
            </el-button>
            <el-button :icon="Refresh" @click="resetSearch">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card v-loading="loading" shadow="never">
        <div class="toolbar-wrapper">
          <div>
            <el-button
              type="primary"
              :icon="Plus"
              @click="handleCreate"
            >
              新建知识库
            </el-button>
            <el-button
              type="danger"
              :icon="Delete"
              :disabled="multipleSelection.length === 0"
              @click="handleBatchDelete"
            >
              批量删除
            </el-button>
          </div>

          <div>
            <el-button type="primary" :icon="Setting" @click="showConfigModal">
              编码模型配置
            </el-button>
          </div>
        </div>

        <div class="table-wrapper">
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" width="80">
              <template #default="scope">
                {{ (paginationData.currentPage - 1) * paginationData.pageSize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="知识库名称" align="center" min-width="120" />
            <el-table-column prop="description" label="描述" align="center" min-width="180" show-overflow-tooltip />
            <el-table-column prop="doc_num" label="文档数量" align="center" width="100" />
            <!-- 添加语言列 -->
            <el-table-column label="语言" align="center" width="100">
              <template #default="scope">
                <el-tag type="info" size="small">
                  {{ scope.row.language === 'Chinese' ? '中文' : '英文' }}
                </el-tag>
              </template>
            </el-table-column>
            <!-- 添加权限列 -->
            <el-table-column label="权限" align="center" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.permission === 'me' ? 'success' : 'warning'" size="small">
                  {{ scope.row.permission === 'me' ? '个人' : '团队' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" width="180">
              <template #default="scope">
                {{ scope.row.create_date }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180" align="center">
              <template #default="scope">
                <el-button
                  type="primary"
                  text
                  bg
                  size="small"
                  :icon="View"
                  @click="handleView(scope.row)"
                >
                  查看
                </el-button>
                <el-button
                  type="danger"
                  text
                  bg
                  size="small"
                  :icon="Delete"
                  @click="handleDelete(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pager-wrapper">
          <el-pagination
            background
            :layout="paginationData.layout"
            :page-sizes="paginationData.pageSizes"
            :total="paginationData.total"
            :page-size="paginationData.pageSize"
            :current-page="paginationData.currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>

      <!-- 知识库详情对话框 -->
      <el-dialog
        v-model="viewDialogVisible"
        :title="`知识库详情 - ${currentKnowledgeBase?.name || ''}`"
        width="80%"
      >
        <div v-if="currentKnowledgeBase">
          <div class="kb-info-header">
            <div>
              <span class="kb-info-label">知识库ID:</span> {{ currentKnowledgeBase.id }}
            </div>
            <div>
              <span class="kb-info-label">文档总数:</span> {{ currentKnowledgeBase.doc_num }}
            </div>
            <div>
              <span class="kb-info-label">语言:</span>
              <el-tag type="info" size="small">
                {{ currentKnowledgeBase.language === 'Chinese' ? '中文' : '英文' }}
              </el-tag>
            </div>
            <div>
              <span class="kb-info-label">权限:</span>
              <el-tag :type="currentKnowledgeBase.permission === 'me' ? 'success' : 'warning'" size="small">
                {{ currentKnowledgeBase.permission === 'me' ? '个人' : '团队' }}
              </el-tag>
            </div>
          </div>

          <div class="document-table-header">
            <div class="left-buttons">
              <el-button type="primary" @click="handleAddDocument">
                添加文档
              </el-button>
            </div>
          </div>

          <div class="document-table-wrapper" v-loading="documentLoading">
            <el-table :data="documentList" style="width: 100%">
              <el-table-column prop="name" label="名称" min-width="180" show-overflow-tooltip />
              <el-table-column prop="chunk_num" label="分块数" width="100" align="center" />
              <el-table-column label="上传日期" width="180" align="center">
                <template #default="scope">
                  {{ scope.row.create_date }}
                </template>
              </el-table-column>
              <el-table-column label="解析状态" width="120" align="center">
                <template #default="scope">
                  <el-tag :type="getParseStatusType(scope.row.progress)">
                    {{ formatParseStatus(scope.row.progress) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                  <el-button
                    type="success"
                    size="small"
                    :icon="CaretRight"
                    @click="handleParseDocument(scope.row)"
                  >
                    解析
                  </el-button>
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    @click="handleRemoveDocument(scope.row)"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <div class="pagination-container">
              <el-pagination
                v-model:current-page="docPaginationData.currentPage"
                v-model:page-size="docPaginationData.pageSize"
                :page-sizes="docPaginationData.pageSizes"
                :layout="docPaginationData.layout"
                :total="docPaginationData.total"
                @size-change="handleDocSizeChange"
                @current-change="handleDocCurrentChange"
              />
            </div>
          </div>
        </div>
      </el-dialog>

      <!-- 新建知识库对话框 -->
      <el-dialog
        v-model="createDialogVisible"
        title="新建知识库"
        width="40%"
      >
        <el-form
          ref="knowledgeBaseFormRef"
          :model="knowledgeBaseForm"
          :rules="knowledgeBaseFormRules"
          label-width="100px"
        >
          <el-form-item label="知识库名称" prop="name">
            <el-input v-model="knowledgeBaseForm.name" placeholder="请输入知识库名称" />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="knowledgeBaseForm.description"
              type="textarea"
              :rows="3"
              placeholder="请输入知识库描述"
            />
          </el-form-item>
          <el-form-item label="语言" prop="language">
            <el-select v-model="knowledgeBaseForm.language" placeholder="请选择语言">
              <el-option label="中文" value="Chinese" />
              <el-option label="英文" value="English" />
            </el-select>
          </el-form-item>
          <el-form-item label="权限" prop="permission">
            <el-select v-model="knowledgeBaseForm.permission" placeholder="请选择权限">
              <el-option label="个人" value="me" />
              <el-option label="团队" value="team" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="createDialogVisible = false">
            取消
          </el-button>
          <el-button
            type="primary"
            :loading="uploadLoading"
            @click="submitCreate"
          >
            确认创建
          </el-button>
        </template>
      </el-dialog>

      <!-- 添加文档对话框 -->
      <el-dialog
        v-model="addDocumentDialogVisible"
        title="添加文档到知识库"
        width="70%"
      >
        <div v-loading="fileLoading">
          <el-table
            :data="fileList"
            style="width: 100%"
            @selection-change="handleFileSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="文件名" min-width="180" show-overflow-tooltip />
            <el-table-column prop="size" label="大小" width="100" align="center">
              <template #default="scope">
                {{ formatFileSize(scope.row.size) }}
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100" align="center">
              <template #default="scope">
                {{ formatFileType(scope.row.type) }}
              </template>
            </el-table-column>
          <!-- 移除上传日期列 -->
          </el-table>

          <!-- 分页控件 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="filePaginationData.currentPage"
              v-model:page-size="filePaginationData.pageSize"
              :page-sizes="filePaginationData.pageSizes"
              :layout="filePaginationData.layout"
              :total="filePaginationData.total"
              @size-change="(size) => { filePaginationData.pageSize = size; filePaginationData.currentPage = 1; getFileList(); }"
              @current-change="(page) => { filePaginationData.currentPage = page; getFileList(); }"
            />
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="addDocumentDialogVisible = false">取消</el-button>
            <el-button
              type="primary"
              :disabled="isAddingDocument"
              @click.stop.prevent="confirmAddDocument"
            >
              {{ isAddingDocument ? '处理中...' : '确定' }}
            </el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 系统 Embedding 配置模态框 -->
      <el-dialog
        v-model="configModalVisible"
        title="编码模型配置"
        width="500px"
        :close-on-click-modal="false"
        @close="handleModalClose"
        append-to-body
      >
        <el-form
          ref="configFormRef"
          :model="configForm"
          :rules="configFormRules"
          label-width="120px"
          v-loading="configFormLoading"
        >
          <el-form-item label="模型名称" prop="llm_name">
            <el-input v-model="configForm.llm_name" placeholder="请先在前台进行配置" disabled />
            <div class="form-tip">
              与模型服务中部署的名称一致
            </div>
          </el-form-item>
          <el-form-item label="模型 API 地址" prop="api_base">
            <el-input v-model="configForm.api_base" placeholder="请先在前台进行配置" disabled />
            <div class="form-tip">
              模型的 Base URL
            </div>
          </el-form-item>
          <el-form-item label="API Key (可选)" prop="api_key">
            <el-input v-model="configForm.api_key" type="password" show-password placeholder="请先在前台进行配置" disabled />
            <div class="form-tip">
              如果模型服务需要认证，请提供
            </div>
          </el-form-item>
          <el-form-item>
            <div style="color: #909399; font-size: 12px; line-height: 1.5;">
              此配置将作为知识库解析时默认的 Embedding 模型。
            </div>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="configModalVisible = false">取消</el-button>
            <el-button type="primary" @click="handleConfigSubmit" :loading="configSubmitLoading">
              测试连接
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <DocumentParseProgress
      :document-id="currentDocId"
      :visible="showParseProgress"
      @close="showParseProgress = false"
      @parse-complete="handleParseComplete"
      @parse-failed="handleParseFailed"
    />
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 94%;
}
.el-alert {
  margin-bottom: 20px;
}

.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between; // 确保左右两边对齐
  align-items: center; // 垂直居中对齐
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.document-table-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  margin-top: 16px;
}

.kb-info-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 4px;

  .kb-info-label {
    color: #606266;
    font-weight: 500;
    margin-right: 8px;
  }
}

.document-table-wrapper {
  margin-top: 20px;
}

.document-table-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
  margin-top: 16px;
}

.pagination-container {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.delete-confirm-dialog {
  :deep(.el-message-box__message) {
    text-align: center;
  }
}

.form-tip {
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}
</style>
