!-- * @Description: * @Version: 1.0 * @Autor: yanxin * @Date: 2019-12-30 20:39:30 * @LastEditors: yanxin * @LastEditTime: 2020-10-28 10:37:17 -->
<template>
    <div>
        <el-drawer
            title="预览"
            :visible.sync="drawerVisible"
            :fullscreen="false"
            direction="ltr"
            :modal="false"
            :wrapperClosable="false"
            destroy-on-close
            :modal-append-to-body="false"
            :append-to-body="false"
            :size="fullscreen ? '100%' : size"
            class=" deal"
            :class="{ drawer: !fullscreen, fullscreen: fullscreen }"
        >
            <template slot="title">
                <el-row type="flex" align="middle" justify="space-between">
                    <div>预览</div>
                    <div :class="{ 'el-icon-full-screen': !fullscreen, 'el-icon-aim': fullscreen }" @click="fullscreen = !fullscreen"></div>
                </el-row>
            </template>

            <template v-if="$getFilePostfix(fileExtensionName, ['pdf', 'excel', 'word'])">
                <pdf v-for="i in numPages" :key="i" :src="url" :page="i" style="width: 100%;"></pdf>
            </template>

            <el-image v-if="$getFilePostfix(fileExtensionName, ['img'])" class="file-image-preview" :src="url" :preview-src-list="[url]"></el-image>
        </el-drawer>
    </div>
</template>
<script>
import pdf from "vue-pdf-print";
export default {
    name: "file",
    components: {
        pdf
    },
    props: {
        size: {
            type: String,
            default: "625px"
        }
    },
    data() {
        return {
            url: "",
            fileExtensionName: "",
            drawerVisible: false,
            numPages: undefined,
            filePath: "",
            fileName: "",
            loading: true,
            fullscreen: false
        };
    },
    mounted() {},
    methods: {
        //预览
        show(filePath, fileName = "测试", fileExtensionName) {
            fileName = encodeURIComponent(fileName);
            this.numPages = 1;
            this.fileExtensionName = fileExtensionName;
            this.filePath = filePath;
            this.fileName = fileName;
            let url = `${_config.API_HOST}/rhpass-caiping/web/api/v1/common/file?fileName=${fileName}&filePath=${filePath}`; //下载接口

            if (this.$getFilePostfix(fileExtensionName, ["excel", "word"])) {
                //是excle或者word
                url = `${_config.API_HOST}/rhpass-caiping/web/api/v1/common/file/preview?fileName=${fileName}&filePath=${filePath}`; //预览接口
            }
            // console.log('https://view.officeapps.live.com/op/view.aspx?src='+url)
            if (this.$getFilePostfix(fileExtensionName, ["pdf", "excel", "word"])) {
                setTimeout(() => {
                    let loadingTask = pdf.createLoadingTask(url);
                    this.url = loadingTask;
                    loadingTask.then(pdf => {
                        this.numPages = pdf.numPages;
                    });
                }, 100);
            } else {
                this.url = url;
            }
            // console.log('url', url)
            if (this.$getFilePostfix(fileExtensionName, ["pdf", "img", "excel", "word"])) {
                this.drawerVisible = true;
            } else {
                if (filePath) {
                    this.$message.warning("当前文件不支持在线预览，已自动下载！");
                    window.location.href = url;
                }
            }
        },
        hide() {
            this.drawerVisible = false;
        },
        //下载
        async download(filePath, fileName = "测试") {
            this.$download(filePath, fileName);
            // this.fileExtensionName=fileExtensionName;
            // console.log("下载");
            // let url =await `${_config.API_HOST}/rhpass-caiping/web/api/v1/common/file?fileName=${fileName}&filePath=${filePath}`;
            // window.location = url;
        }
    }
};
</script>
<style lang="scss" scoped>
.drawer {
    text-align: center;
    width: 625px;
}
.fullscreen {
    text-align: center;
}
.file-image-preview {
    /deep/ .el-image-viewer__wrapper .el-image-viewer__btn .el-icon-circle-close {
        color: white;
    }
}
</style>