<template>
  <a-modal
    class="modal-style"
    :dialog-style="{ top: '0' }"
    :title="$t('base.info.watermark.preview')"
    :visible="isShowModal"
    @ok="closeModal"
    @cancel="closeModal"
    width="100%">

    <!-- Excel 文件预览组件 -->
    <vue-office-excel
      v-if="isExcel"
      class="excel-style"
      :src="fileUrl"
      @rendered="$t('plan.dvp.operation-succeeded')"
      @error="$t('plan.dvp.operation-failed')"/>

    <!-- word 文件预览组件 -->
    <vue-office-word
      v-if="isWord"
      class="excel-style"
      :src="fileUrl"
      @rendered="$t('plan.dvp.operation-succeeded')"
      @error="$t('plan.dvp.operation-failed')"/>

    <!-- pdf 文件预览组件 -->
    <vue-office-pdf
      v-if="isPdf"
      class="excel-style"
      :src="fileUrl"
      @rendered="$t('plan.dvp.operation-succeeded')"
      @error="$t('plan.dvp.operation-failed')"/>

    <!-- 图片预览 -->
    <div id="imagePreview" style="width: 100%; height: 100%"></div>

  </a-modal>
</template>


<script>

//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";

//引入VueOfficeWord组件
import VueOfficeWord from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";

//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf';

export default {
  components: {
    VueOfficeExcel,
    VueOfficeWord,
    VueOfficePdf
  },
  data() {
    return {
      // 文件预览地址
      fileUrl: undefined,
      // 模态框显示隐藏
      isShowModal: false,
      isWord: false,
      isExcel: false,
      isPdf: false,
      blobUrl: undefined
    };
  },

  methods: {

    /**
     * 关闭预览
     */
    closeModal() {
      this.isShowModal = false;
      this.isWord = false;
      this.isExcel = false;
      this.isPdf = false;
      // 清理: 当不再需要Blob URL时，应该释放它
      URL.revokeObjectURL(this.blobUrl);
      // 清空图片
      let imagePreview = document.getElementById('imagePreview');
      imagePreview.innerHTML = '';
    },

    /**
     * 判断文件是Word、Excel、还是PDF
     * @param fileName
     */
    getFileExtension(fileName) {

      // 使用'.'字符分割文件名
      let parts = fileName.split('.');

      // 获取最后一部分，即扩展名
      let extension = parts.pop();

      switch (extension) {
        case 'docx':
          this.isWord = true;
          break;
        case 'xlsx':
          this.isExcel = true;
          break;
        case 'pdf':
          this.isPdf = true;
          break;
        case 'png':
          this.transFromPicture(extension, fileName);
          break;
        case 'jpg':
          this.transFromPicture(extension, fileName);
        case 'jpeg':
          this.transFromPicture(extension, fileName);
          break;
        default:
          break;
      }
    },

    /**
     * 转换数据格式，以便于显示图片
     * @param val
     */
    transFromPicture(extension, fileName) {
      let imagePreview = document.getElementById('imagePreview');
      // 步骤1: 将ArrayBuffer转换为Blob对象
      let blob = new Blob([this.fileUrl], { type: 'image/' + extension });
      // 步骤2: 创建一个表示Blob对象的URL
      this.blobUrl = URL.createObjectURL(blob);
      // 步骤3: 创建一个img元素并设置src属性为Blob URL
      const img = document.createElement('img');
      // 设置img元素的src属性为读取到的文件数据
      img.src = this.blobUrl;
      img.style.height = "100%";
      img.style.width = "100%";
      img.style.objectFit = "cover";
      img.alt = fileName;
      // 将img元素添加到预览区域
      imagePreview.innerHTML = ''; // 清空之前的图片
      imagePreview.appendChild(img);
    }
  }
};

</script>

<style lang="less" scoped>
.excel-style {
  height: 88vh;
  width: calc(100% - 10px);
}
</style>
<style>
.modal-style ::-webkit-scrollbar {
  width: 6px !important;
}
.modal-style {
  z-index: 999;
}
</style>
