<template>
  <div class="file-preview">
    <!-- 渲染当前组件，如果没有组件时显示“加载中” -->
    <component :is="currentComponent" v-bind="currentProps" v-if="currentComponent" />
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import PdfPreview from "./PdfPreview.vue";
import DocxPreview from "./DocxPreview.vue";
import TxtPreview from "./TxtPreview.vue";

export default {
  props: {
    fileUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      currentFileUrl: null, // 当前的文件 URL
      isLoading: true, // 加载状态
    };
  },
  watch: {
    fileUrl: {
      immediate: true, // 监听初始值
      handler(newVal) {
        // 清空状态
        this.isLoading = true; // 设置加载状态
        this.currentFileUrl = null; // 清空当前文件 URL

        // 模拟清空后的延迟处理（比如等待组件重新加载）
        setTimeout(() => {
          this.currentFileUrl = newVal; // 更新为新的文件 URL
          this.isLoading = false; // 加载完成
        }, 100); // 延迟 100ms（可根据需要调整）
      },
    },
  },
  computed: {
    fileType() {
      // 获取文件后缀名
      const ext = this.currentFileUrl?.split(".").pop().toLowerCase();
      return ext;
    },
    currentComponent() {
      // 根据文件类型返回对应的组件
      if (this.isLoading || !this.currentFileUrl) return null; // 加载中时不渲染组件
      switch (this.fileType) {
        case "pdf":
          return PdfPreview;
        case "doc":
        case "docx":
          return DocxPreview;
        case "txt":
          return TxtPreview;
        default:
          return null;
      }
    },
    currentProps() {
      // 动态绑定 props
      return {
        pdfUrl: this.currentFileUrl,
        docxUrl: this.currentFileUrl,
        txtUrl: this.currentFileUrl,
      };
    },
  },
};
</script>

<style>
.file-preview {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #999;
}
</style>
