<template>
  <div class="file-preview">
    <div v-if="isSupported">
      <!-- PDF 预览 -->
      <iframe
        v-if="fileType === 'pdf'"
        :src="fileUrl"
        width="100%"
        height="822px"
      ></iframe>

      <!-- 图片预览 -->
      <img
        v-else-if="isImage"
        :src="fileUrl"
        alt="图片预览"
        style="max-width: 100%; max-height: 822px"
      />

      <!-- Word 文档预览 -->
      <div v-if="isWord && wordLoaded" v-html="wordContent" class="word-preview"></div>
      <div v-else-if="isWord && !wordLoaded" class="loading-word">
        {{ wordLoadingError ? '加载失败，请重试' : '加载中...' }}
      </div>

      <!-- 其他 Office 文档预览 -->
      <iframe
        v-else-if="isOffice"
        :src="officePreviewUrl"
        width="100%"
        height="822px"
      ></iframe>

      <!-- 文本文件预览 -->
      <pre
        v-else-if="fileType === 'txt'"
        style="max-height: 822px; overflow: auto"
        >{{ textContent }}</pre
      >
    </div>
    <div v-else class="unsupported-file">
      不支持预览该文件类型，<a :href="fileUrl" download>点击下载</a>
    </div>
  </div>
</template>
  
  <script>
import mammoth from "mammoth";
export default {
  props: {
    fileUrl: {
      type: String,
      required: true,
    },
    fileType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      textContent: "",
      wordContent: "",
      supportedTypes: [
        "pdf",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "ppt",
        "pptx",
        "txt",
        "jpg",
        "jpeg",
        "png",
        "gif",
      ],
      wordLoaded: false,
      wordLoadingError: false,
    };
  },
  watch: {
    fileUrl: {
      immediate: true,
      handler() {
        if (this.isWord) {
          this.loadWordContent();
        }
      },
    },
  },
  computed: {
    isSupported() {
      return this.supportedTypes.includes(this.fileType);
    },
    isImage() {
      return ["jpg", "jpeg", "png", "gif"].includes(this.fileType);
    },
    isWord() {
      return ["doc", "docx"].includes(this.fileType);
    },
    isOffice() {
      return ["xls", "xlsx", "ppt", "pptx"].includes(this.fileType);
    },
  },
  mounted() {
    if (this.fileType === "txt") {
      this.loadTextContent();
    } else if (this.isWord) {
      this.loadWordContent();
    }
  },
  methods: {
    async loadWordContent() {
      this.wordLoaded = false;
      this.wordLoadingError = false;

      try {
        const response = await fetch(this.fileUrl);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const blob = await response.blob();
        const arrayBuffer = await this.blobToArrayBuffer(blob);
        const result = await mammoth.convertToHtml({ arrayBuffer });
        this.wordContent = result.value;
        this.wordLoaded = true;
      } catch (error) {
        console.error("加载Word文档内容时出错:", error);
        this.wordContent = "无法加载Word文档内容";
        this.wordLoadingError = true;
      } finally {
        this.wordLoaded = true;
      }
    },
    blobToArrayBuffer(blob) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsArrayBuffer(blob);
      });
    },
  },
};
</script>
  
  <style scoped>
.file-preview {
  width: 100%;
  height: 822px;
  overflow: auto;
}
.unsupported-file {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
  color: #909399;
}
.word-preview {
  padding: 20px;
  background-color: white;
}
.loading-word {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
  color: #909399;
}
</style>