<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import VuePdfEmbed from "vue-pdf-embed";
import ReDocxPreview from "@/components/ReDocxPreview/index.vue";
import {
  getDocuments,
  uploadDocument,
  deleteDocument,
  reindexDocument,
  getDocumentChunks,
  type KbDocumentVO,
  type DocumentStatus,
  type DocumentChunkVO
} from "@/api/ai-chat";
import { getProjectList, type ProjectItem } from "@/api/project";
import dayjs from "dayjs";

import UploadIcon from "~icons/ri/upload-2-line";
import RefreshIcon from "~icons/ri/refresh-line";
import DeleteIcon from "~icons/ep/delete";
import ReIndexIcon from "~icons/ri/restart-line";
import FileIcon from "~icons/ri/file-text-line";
import PdfIcon from "~icons/ri/file-pdf-line";
import DocIcon from "~icons/ri/file-word-line";
import TxtIcon from "~icons/ri/file-text-line";
import ViewIcon from "~icons/ri/eye-line";
import ChunkIcon from "~icons/ri/file-list-3-line";
import PreviewIcon from "~icons/ri/file-search-line";

defineOptions({
  name: "KnowledgeBase"
});

// 状态
const loading = ref(false);
const uploading = ref(false);
const documents = ref<KbDocumentVO[]>([]);
const projects = ref<ProjectItem[]>([]);
const selectedProjectId = ref<string | undefined>();
const projectLoading = ref(false);

// 上传相关
const uploadDialogVisible = ref(false);
const uploadFileList = ref<File[]>([]);
const fileInputRef = ref<HTMLInputElement | null>(null);

// 分片相关
const chunkDialogVisible = ref(false);
const chunkLoading = ref(false);
const currentDocChunks = ref<DocumentChunkVO[]>([]);
const currentChunkDoc = ref<KbDocumentVO | null>(null);
const selectedChunk = ref<DocumentChunkVO | null>(null);
const chunkDetailVisible = ref(false);

// 预览相关
const previewDialogVisible = ref(false);
const previewDoc = ref<KbDocumentVO | null>(null);
const previewLoading = ref(false);
const previewPageCount = ref(1);
const previewCurrentPage = ref(1);
const previewRotation = ref(0);
const previewPdfRef = ref<any>(null);
const previewAllPages = ref(false);
const previewRotations = [0, 90, 180, 270];
const previewDocxRef = ref<InstanceType<typeof ReDocxPreview> | null>(null);

// 加载项目列表
async function loadProjects() {
  projectLoading.value = true;
  try {
    const res = await getProjectList({ pageNum: 1, pageSize: 100 });
    if (res.code === 200) {
      projects.value = res.data?.rows || [];
      if (projects.value.length > 0 && !selectedProjectId.value) {
        selectedProjectId.value = String(projects.value[0].id);
      }
    }
  } catch (error) {
    console.error("加载项目列表失败:", error);
  } finally {
    projectLoading.value = false;
  }
}

// 加载文档列表
async function loadDocuments() {
  if (!selectedProjectId.value) return;

  loading.value = true;
  try {
    const res = await getDocuments(selectedProjectId.value);
    if (res.code === 200) {
      documents.value = res.data || [];
    }
  } catch (error) {
    console.error("加载文档列表失败:", error);
  } finally {
    loading.value = false;
  }
}

// 项目变更时重新加载文档
watch(selectedProjectId, () => {
  loadDocuments();
});

// 打开上传对话框
function openUploadDialog() {
  uploadFileList.value = [];
  uploadDialogVisible.value = true;
}

// 选择文件
function handleFileSelect(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files) {
    const files = Array.from(target.files);
    // 过滤支持的文件类型
    const supportedTypes = ["pdf", "doc", "docx", "txt", "md"];
    const validFiles = files.filter(file => {
      const ext = file.name.split(".").pop()?.toLowerCase();
      return supportedTypes.includes(ext || "");
    });

    if (validFiles.length !== files.length) {
      ElMessage.warning(
        "部分文件格式不支持，仅支持 PDF、Word、TXT、Markdown 格式"
      );
    }

    uploadFileList.value = [...uploadFileList.value, ...validFiles];
  }
}

// 移除文件
function removeFile(index: number) {
  uploadFileList.value.splice(index, 1);
}

// 上传文件
async function handleUpload() {
  if (uploadFileList.value.length === 0) {
    ElMessage.warning("请选择要上传的文件");
    return;
  }

  if (!selectedProjectId.value) {
    ElMessage.warning("请先选择项目");
    return;
  }

  uploading.value = true;
  let successCount = 0;
  let failCount = 0;

  for (const file of uploadFileList.value) {
    try {
      const res = await uploadDocument({
        projectId: selectedProjectId.value,
        file
      });
      if (res.code === 200) {
        successCount++;
      } else {
        failCount++;
      }
    } catch (error) {
      failCount++;
      console.error(`上传文件 ${file.name} 失败:`, error);
    }
  }

  uploading.value = false;
  uploadDialogVisible.value = false;

  if (successCount > 0) {
    ElMessage.success(`成功上传 ${successCount} 个文件`);
    loadDocuments();
  }
  if (failCount > 0) {
    ElMessage.error(`${failCount} 个文件上传失败`);
  }
}

// 删除文档
async function handleDelete(doc: KbDocumentVO) {
  try {
    await ElMessageBox.confirm(
      "确定要删除这个文档吗？删除后将无法恢复。",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    const res = await deleteDocument(doc.id);
    if (res.code === 200) {
      ElMessage.success("删除成功");
      loadDocuments();
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除文档失败:", error);
    }
  }
}

// 重新索引文档
async function handleReindex(doc: KbDocumentVO) {
  try {
    const res = await reindexDocument(doc.id);
    if (res.code === 200) {
      ElMessage.success("重新索引已启动");
      loadDocuments();
    }
  } catch (error) {
    console.error("重新索引失败:", error);
    ElMessage.error("重新索引失败");
  }
}

// 查看文档分片
async function handleViewChunks(doc: KbDocumentVO) {
  currentChunkDoc.value = doc;
  chunkLoading.value = true;
  chunkDialogVisible.value = true;
  selectedChunk.value = null;

  try {
    const res = await getDocumentChunks(doc.id);
    if (res.code === 200) {
      currentDocChunks.value = res.data || [];
    }
  } catch (error) {
    console.error("加载分片失败:", error);
    ElMessage.error("加载分片失败");
  } finally {
    chunkLoading.value = false;
  }
}

// 查看分片详情
function handleViewChunkDetail(chunk: DocumentChunkVO) {
  selectedChunk.value = chunk;
  chunkDetailVisible.value = true;
}

// 预览文档
function handlePreview(doc: KbDocumentVO) {
  previewDoc.value = doc;
  previewDialogVisible.value = true;
  previewLoading.value = true;
  previewCurrentPage.value = 1;
  previewRotation.value = 0;
  previewAllPages.value = false;
}

// PDF渲染完成
function handlePdfRender() {
  previewLoading.value = false;
  if (previewPdfRef.value?.doc) {
    previewPageCount.value = previewPdfRef.value.doc.numPages;
  }
}

// 切换显示所有页面
function handlePreviewAllPagesChange() {
  previewCurrentPage.value = previewAllPages.value ? null : 1;
}

// 旋转PDF
function handleRotatePdf() {
  previewRotation.value =
    previewRotation.value === 3 ? 0 : previewRotation.value + 1;
}

// 打印PDF
function handlePrintPdf() {
  previewPdfRef.value?.print();
}

// 打开文件链接
function handleOpenFile(url: string) {
  window.open(url, "_blank");
}

// 判断是否可预览
function canPreview(doc: KbDocumentVO): boolean {
  return !!doc.fileUrl && doc.status === "active";
}

// 获取文件类型显示名
function getFileTypeName(fileType: string): string {
  const typeMap: Record<string, string> = {
    pdf: "PDF",
    doc: "Word",
    docx: "Word",
    txt: "文本",
    md: "Markdown"
  };
  return typeMap[fileType.toLowerCase()] || fileType.toUpperCase();
}

// 获取状态标签类型
function getStatusType(
  status: DocumentStatus
): "success" | "warning" | "info" | "danger" {
  switch (status) {
    case "active":
      return "success";
    case "processing":
      return "warning";
    case "error":
      return "danger";
    default:
      return "info";
  }
}

// 获取状态文本
function getStatusText(status: DocumentStatus): string {
  switch (status) {
    case "pending":
      return "待处理";
    case "processing":
      return "处理中";
    case "active":
      return "可用";
    case "error":
      return "处理失败";
    default:
      return "未知";
  }
}

// 获取文件图标
function getFileIcon(fileType: string) {
  const type = fileType.toLowerCase();
  if (type === "pdf") return PdfIcon;
  if (["doc", "docx"].includes(type)) return DocIcon;
  if (type === "txt") return TxtIcon;
  return FileIcon;
}

// 格式化文件大小
function formatFileSize(bytes: number): string {
  if (bytes < 1024) return bytes + " B";
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
}

// 格式化时间
function formatTime(time: string): string {
  return dayjs(time).format("YYYY-MM-DD HH:mm");
}

// 初始化
onMounted(() => {
  loadProjects();
});
</script>

<template>
  <div class="knowledge-base-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div>
        <h2 class="text-xl font-bold">项目知识库</h2>
        <p class="text-gray-500 text-sm mt-1">
          管理项目相关文档，为AI对话提供知识支持
        </p>
      </div>
      <div class="header-actions">
        <el-button :icon="useRenderIcon(RefreshIcon)" @click="loadDocuments">
          刷新
        </el-button>
        <el-button
          type="primary"
          :icon="useRenderIcon(UploadIcon)"
          @click="openUploadDialog"
        >
          上传文档
        </el-button>
      </div>
    </div>

    <!-- 项目选择 -->
    <el-card shadow="never" class="mb-4">
      <div class="flex items-center gap-4">
        <span class="text-gray-600">选择项目：</span>
        <el-select
          v-model="selectedProjectId"
          placeholder="请选择项目"
          style="width: 300px"
          @change="loadDocuments"
        >
          <el-option
            v-for="project in projects"
            :key="project.id"
            :label="project.projectName"
            :value="project.id"
          />
        </el-select>
      </div>
    </el-card>

    <!-- 文档列表 -->
    <el-card shadow="never">
      <template #header>
        <div class="flex-bc">
          <span>文档列表</span>
          <span class="text-gray-400 text-sm"
            >共 {{ documents.length }} 个文档</span
          >
        </div>
      </template>

      <el-table v-loading="loading" :data="documents" stripe>
        <el-table-column label="文档名称" min-width="200">
          <template #default="{ row }">
            <div class="flex items-center gap-2">
              <component
                :is="useRenderIcon(getFileIcon(row.fileType))"
                :size="20"
                class="text-gray-400"
              />
              <span class="truncate">{{ row.title }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="文件类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag size="small" type="info">{{
              row.fileType.toUpperCase()
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="文件大小" width="100" align="center">
          <template #default="{ row }">
            {{ formatFileSize(row.fileSize) }}
          </template>
        </el-table-column>

        <el-table-column label="分块数量" width="100" align="center">
          <template #default="{ row }">
            {{ row.chunkCount || 0 }}
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="上传者" width="100" align="center">
          <template #default="{ row }">
            {{ row.createByName }}
          </template>
        </el-table-column>

        <el-table-column label="上传时间" width="160" align="center">
          <template #default="{ row }">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300" align="center" fixed="right">
          <template #default="{ row }">
            <el-button
              v-if="canPreview(row)"
              link
              type="primary"
              @click="handlePreview(row)"
            >
              <component :is="useRenderIcon(PreviewIcon)" class="mr-1" />
              预览
            </el-button>
            <el-button
              v-if="row.status === 'active'"
              link
              type="primary"
              @click="handleViewChunks(row)"
            >
              <component :is="useRenderIcon(ChunkIcon)" class="mr-1" />
              查看分片
            </el-button>
            <el-button
              v-if="row.status === 'active' || row.status === 'error'"
              link
              type="primary"
              @click="handleReindex(row)"
            >
              <component :is="useRenderIcon(ReIndexIcon)" class="mr-1" />
              重新索引
            </el-button>
            <el-button link type="danger" @click="handleDelete(row)">
              <component :is="useRenderIcon(DeleteIcon)" class="mr-1" />
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-empty
        v-if="!loading && documents.length === 0"
        description="暂无文档"
      >
        <el-button type="primary" @click="openUploadDialog">
          <template #icon>
            <component :is="useRenderIcon(UploadIcon)" />
          </template>
          上传文档
        </el-button>
      </el-empty>
    </el-card>

    <!-- 上传对话框 -->
    <el-dialog
      v-model="uploadDialogVisible"
      title="上传文档"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="upload-content">
        <div
          class="upload-area"
          @click="fileInputRef?.click()"
          @dragover.prevent
          @drop.prevent="handleFileSelect"
        >
          <input
            ref="fileInputRef"
            type="file"
            multiple
            accept=".pdf,.doc,.docx,.txt,.md"
            style="display: none"
            @change="handleFileSelect"
          />
          <component
            :is="useRenderIcon(UploadIcon)"
            style="font-size: 48px; color: var(--el-color-primary)"
          />
          <p class="mt-4 text-gray-500">点击或拖拽文件到此处上传</p>
          <p class="text-xs text-gray-400 mt-2">
            支持 PDF、Word、TXT、Markdown 格式，单个文件最大 50MB
          </p>
        </div>

        <div v-if="uploadFileList.length > 0" class="file-list mt-4">
          <div
            v-for="(file, index) in uploadFileList"
            :key="index"
            class="file-item"
          >
            <div class="flex items-center gap-2">
              <component :is="useRenderIcon(FileIcon)" />
              <span class="flex-1 truncate">{{ file.name }}</span>
              <span class="text-xs text-gray-400">{{
                formatFileSize(file.size)
              }}</span>
              <el-button link type="danger" @click="removeFile(index)">
                <component :is="useRenderIcon('ri/close-line')" />
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="uploading" @click="handleUpload">
          开始上传
        </el-button>
      </template>
    </el-dialog>

    <!-- 分片列表对话框 -->
    <el-dialog
      v-model="chunkDialogVisible"
      :title="`文档分片 - ${currentChunkDoc?.title || ''}`"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-table
        v-loading="chunkLoading"
        :data="currentDocChunks"
        stripe
        max-height="400"
      >
        <el-table-column label="序号" width="80" align="center">
          <template #default="{ row }">
            {{ row.chunkIndex + 1 }} / {{ row.chunkTotal }}
          </template>
        </el-table-column>
        <el-table-column label="内容预览" min-width="400">
          <template #default="{ row }">
            <div class="chunk-content-preview">
              {{ row.content.slice(0, 200)
              }}{{ row.content.length > 200 ? "..." : "" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag size="small">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleViewChunkDetail(row)">
              <component :is="useRenderIcon(ViewIcon)" class="mr-1" />
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-empty
        v-if="!chunkLoading && currentDocChunks.length === 0"
        description="暂无分片数据"
      />
    </el-dialog>

    <!-- 分片详情对话框 -->
    <el-dialog v-model="chunkDetailVisible" title="分片详情" width="700px">
      <template v-if="selectedChunk">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="分片序号">
            {{ selectedChunk.chunkIndex + 1 }} / {{ selectedChunk.chunkTotal }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag size="small">{{ selectedChunk.status }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="文档标题" :span="2">
            {{ selectedChunk.title }}
          </el-descriptions-item>
          <el-descriptions-item label="文档类型">
            {{ selectedChunk.docType }}
          </el-descriptions-item>
          <el-descriptions-item label="来源类型">
            {{ selectedChunk.sourceType }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="chunk-detail-content">
          <h4>分片内容</h4>
          <div class="content-box">
            {{ selectedChunk.content }}
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 文档预览对话框 -->
    <el-dialog
      v-model="previewDialogVisible"
      :title="`预览 - ${previewDoc?.title || ''}`"
      width="900px"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <template v-if="previewDoc">
        <!-- PDF预览 -->
        <template v-if="previewDoc.fileType?.toLowerCase() === 'pdf'">
          <div
            v-loading="previewLoading"
            class="pdf-preview-container"
            element-loading-text="加载中..."
          >
            <div class="pdf-toolbar">
              <div v-if="previewAllPages" class="page-info">
                共 {{ previewPageCount }} 页
              </div>
              <div v-else>
                <el-pagination
                  v-model:current-page="previewCurrentPage"
                  background
                  layout="prev, slot, next"
                  :page-size="1"
                  :total="previewPageCount"
                >
                  {{ previewCurrentPage }} / {{ previewPageCount }}
                </el-pagination>
              </div>
              <div class="pdf-actions">
                <el-checkbox
                  v-model="previewAllPages"
                  @change="handlePreviewAllPagesChange"
                >
                  显示所有页面
                </el-checkbox>
                <el-button link @click="handleRotatePdf">
                  <component
                    :is="useRenderIcon('ri/anticlockwise-line')"
                    :size="18"
                  />
                  旋转
                </el-button>
                <el-button link @click="handlePrintPdf">
                  <component
                    :is="useRenderIcon('ri/printer-line')"
                    :size="18"
                  />
                  打印
                </el-button>
              </div>
            </div>
            <el-scrollbar class="pdf-scrollbar">
              <vue-pdf-embed
                ref="previewPdfRef"
                :rotation="previewRotations[previewRotation]"
                :page="previewCurrentPage"
                :source="previewDoc.fileUrl"
                class="pdf-viewer"
                @rendered="handlePdfRender"
              />
            </el-scrollbar>
          </div>
        </template>

        <!-- 文本/Markdown预览 -->
        <template
          v-else-if="['txt', 'md'].includes(previewDoc.fileType?.toLowerCase())"
        >
          <div class="text-preview-container">
            <iframe :src="previewDoc.fileUrl" class="text-preview-iframe" />
          </div>
        </template>

        <!-- Word预览 -->
        <template
          v-else-if="
            ['doc', 'docx'].includes(previewDoc.fileType?.toLowerCase())
          "
        >
          <div class="docx-preview-container">
            <div class="docx-toolbar">
              <div class="docx-title">
                {{ previewDoc.title }}
              </div>
              <div class="docx-actions">
                <el-button link @click="previewDocxRef?.refresh()">
                  <component
                    :is="useRenderIcon('ri/refresh-line')"
                    :size="18"
                  />
                  刷新
                </el-button>
                <el-button link @click="previewDocxRef?.print()">
                  <component
                    :is="useRenderIcon('ri/printer-line')"
                    :size="18"
                  />
                  打印
                </el-button>
                <el-button link @click="handleOpenFile(previewDoc.fileUrl)">
                  <component
                    :is="useRenderIcon('ri/download-line')"
                    :size="18"
                  />
                  下载
                </el-button>
              </div>
            </div>
            <el-scrollbar class="docx-scrollbar">
              <ReDocxPreview
                ref="previewDocxRef"
                :url="previewDoc.fileUrl"
                class="docx-viewer"
              />
            </el-scrollbar>
          </div>
        </template>

        <!-- 其他文件类型 -->
        <template v-else>
          <div class="other-preview-container">
            <div class="preview-tip">
              <component
                :is="useRenderIcon('ri/file-info-line')"
                :size="48"
                class="tip-icon"
              />
              <p>{{ getFileTypeName(previewDoc.fileType) }} 文件预览</p>
              <p class="tip-desc">此文件类型不支持直接预览，您可以下载后查看</p>
              <el-button
                type="primary"
                @click="handleOpenFile(previewDoc.fileUrl)"
              >
                <component
                  :is="useRenderIcon('ri/download-line')"
                  class="mr-1"
                />
                打开文件
              </el-button>
            </div>
          </div>
        </template>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-base-container {
  padding: 16px;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .header-actions {
      display: flex;
      gap: 8px;
    }
  }

  .upload-content {
    .upload-area {
      padding: 40px;
      text-align: center;
      cursor: pointer;
      border: 2px dashed var(--el-border-color);
      border-radius: 8px;
      transition: border-color 0.2s;

      &:hover {
        border-color: var(--el-color-primary);
      }
    }

    .file-list {
      max-height: 200px;
      overflow-y: auto;

      .file-item {
        padding: 8px 12px;
        margin-bottom: 8px;
        background: var(--el-fill-color-lighter);
        border-radius: 4px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.chunk-content-preview {
  font-size: 13px;
  line-height: 1.5;
  color: var(--el-text-color-regular);
  word-break: break-all;
  white-space: pre-wrap;
}

.chunk-detail-content {
  margin-top: 16px;

  h4 {
    margin-bottom: 8px;
    font-weight: 500;
  }

  .content-box {
    max-height: 300px;
    padding: 12px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    background: var(--el-fill-color-lighter);
    border-radius: 4px;
  }
}

// PDF预览样式
.pdf-preview-container {
  display: flex;
  flex-direction: column;
  height: 70vh;

  .pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .page-info {
      font-size: 14px;
      font-weight: 500;
    }

    .pdf-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }

  .pdf-scrollbar {
    flex: 1;
    overflow: auto;
  }

  .pdf-viewer {
    width: 100%;
  }
}

// 文本预览样式
.text-preview-container {
  height: 70vh;

  .text-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}

// DOCX预览样式
.docx-preview-container {
  display: flex;
  flex-direction: column;
  height: 70vh;

  .docx-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .docx-title {
      font-size: 14px;
      font-weight: 500;
    }

    .docx-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }

  .docx-scrollbar {
    flex: 1;
    overflow: auto;
  }

  .docx-viewer {
    width: 100%;
    min-height: 500px;
  }
}

// 其他文件预览样式
.other-preview-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;

  .preview-tip {
    text-align: center;

    .tip-icon {
      margin-bottom: 16px;
      color: var(--el-text-color-secondary);
    }

    p {
      margin: 8px 0;
      font-size: 16px;
    }

    .tip-desc {
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }
  }
}
</style>
