<template>
	<div class="yh-file-viewer">
        <el-dialog v-model="visible" fullscreen :show-close="false" @closed="$emit('closed')">
            <div v-loading="loading" class="yh-file-viewer__content">
                <component :is="`vue_office_${fileType.split('.')[0]}`" :src="filePath" :options="options" @rendered="loading = false" @error="loading = false"></component>
            </div>
        </el-dialog>
    </div>

	<yh-image-viewer :showViewer="showViewer" :imageList="[filePath]" teleported @close="showViewer = false"></yh-image-viewer>
</template>

<script>
import { defineAsyncComponent } from "vue";
import vue_office_docx from "@vue-office/docx";
import vue_office_excel from "@vue-office/excel";
import vue_office_pdf from "@vue-office/pdf";

import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";

import { fileTypes } from "./main";

export default {
    emits: ["closed"],
    components: {
        vue_office_docx,
        vue_office_excel,
        vue_office_pdf,
        yhImageViewer: defineAsyncComponent(() => import("@/components/Upload/imageViewer.vue"))
    },

    data() {
        return {
            visible: false,
            loading: false,
            fileType: null,
            filePath: null,
            options: {
                xls: false,       // 预览xlsx文件设为false；预览xls文件设为true
                minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
                minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
                widthOffset: 10,  // 如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
                heightOffset: 10, // 在默认渲染的列表高度上再加 Npx高
                beforeTransformData: workbookData => workbookData, // 底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
                transformData: workbookData => workbookData // 将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
            },

            showViewer: false
        }
    },

    methods: {
        init(uploadFile) {
            if (!fileTypes[uploadFile["fileType"]]) {
                ElMessage.warning("当前只支持预览.docx、.pdf、excel文件，文件已下载");
                Folder.download(uploadFile.path).then(res => {
                    const a = document.createElement("a");
                    const blob = new Blob([res.data], { type: uploadFile.fileType });
                    a.download = uploadFile.name;
                    a.href = URL.createObjectURL(blob);
                    a.click();
                });
            } else {
                this.filePath = uploadFile.path;
                this.fileType = fileTypes[uploadFile["fileType"]];
                if (this.fileType == "image") this.showViewer = true;
                else {
                    this.loading = true;
                    this.visible = true;
                    if (this.fileType.includes(".")) this.options.xls = this.fileType.split(".")[1] == "xls";
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.yh-file-viewer :deep(.el-dialog) {
  --el-dialog-bg-color: transparent;
  --el-dialog-padding-primary: 0;

  .el-dialog__body {
    height: 100%;

    .yh-file-viewer__content {
      height: 100%;
    }
  }
}
</style>