<template>
    
    <!-- v-dialogChange:{dialogChange}="true" -->
    <el-dialog
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        width="70%"
        top="2vh"
        v-dialogDrag
        :append-to-body="appendToBody"
        :class="[loading ? 'dialog-box' : '']"
    >
        <div
            style="height: 100%"
            v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 1)"
        >
            <img
                @load="mskLoading"
                width="100%"
                :src="previewUrl"
                alt=""
                v-if="fileType === 1"
            />
            <Docx
                @closeLoading="closeLoading"
                :fileUrl="previewUrl"
                v-if="fileType === 2"
            ></Docx>
            <!-- pdf预览 -->
            <div v-if="fileType === 3">
                <div class="pdf-box">
                    <pdf
                        v-for="i in pageTotalNum"
                        :key="i"
                        ref="pdf"
                        :src="previewUrl"
                        :page="i"
                        @page-loaded="pageLoaded($event)"
                        @error="pdfError($event)"
                    >
                    </pdf>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <!-- <i class="ls-icon mouse"></i> -->
        </span>
    </el-dialog>
</template>

<script>
import Docx from '@/components/docx'
import req from '@/request.js'
import pdf from 'vue-pdf'
export default {
    name: 'FilePreview',
    props: {
        appendToBody: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        Docx,
        pdf,
    },
    data() {
        return {
            dialogVisible: false,
            fileType: 0, //1、图片，2、word，3、excel, 4、pdf，
            previewUrl: '',
            loading: false,
            pageTotalNum: 1,
        }
    },
    methods: {
        open(type) {
            this.loading = true
            type = type.toLowerCase()
            let imgType = [
                'png',
                'jpg',
                'jpeg',
                'bmp',
                'gif',
                'webp',
                'psd',
                'svg',
                'tiff',
            ]
            let wordType = ['doc', 'docx']
            let pdf = ['pdf']
            let arr = [imgType, wordType, pdf]
            arr.forEach((item, index) => {
                if (item.indexOf(type) !== -1) {
                    this.fileType = index + 1
                }
            })
            if (![...imgType, ...wordType, ...pdf].includes(type)) {
                this.$message.warning('抱歉，该文件类型无法预览!')
                return
            } else {
                let _this = this
                if (this.fileType === 3) {
                    req.get(_this.previewUrl, 'arraybuffer').then(
                        (response) => {
                            console.log(response)
                            _this.previewUrl = window.URL.createObjectURL(
                                new Blob([response.data], {
                                    type: 'application/pdf',
                                })
                            )
                        }
                    )
                }
                this.dialogVisible = true
            }
        },
        mskLoading() {
            this.loading = false
        },
        closeLoading() {
            this.loading = false
        },
        // 页面加载完成回调函数，其中e为当前页数
        pageLoaded(e) {
            this.getNumPages()
            this.loading = false
        },
        // 获取pdf总页数
        getNumPages() {
            let loadingTask = pdf.createLoadingTask(this.previewUrl)
            loadingTask.promise
                .then((pdf) => {
                    this.pageTotalNum = pdf.numPages
                })
                .catch((err) => {
                    console.error('pdf 加载失败', err)
                })
        },
        //
        pdfError(error) {
            this.loading = false
            this.$message.error(error)
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
/deep/.el-dialog__wrapper {
  overflow: hidden;
}
.pdf__iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/deep/ .el-dialog__body {
    // overflow: hidden!important;
  height: 81vh;
  max-height: 81vh !important;
  padding: 0px 10px 10px 10px;
  img {
    user-select: none;
    pointer-events: none;
  }
  ::-webkit-scrollbar {
    width: 0.3vw !important;
  }
}
/deep/.el-dialog__header {
  background: #fff;
  .el-dialog__close {
    color: #909399 !important;
  }
}
/deep/.el-dialog__footer {
  padding: 0;
  height: 35px;
}
.ls-icon {
  position: relative;
  text-align: right;
  width: 100%;
  height: 14px;
  display: block;
}
.ls-icon::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: url('../../assets/img/svg/ls.svg') no-repeat;
  background-size: cover;
  position: absolute;
  right: 10px;
  top: -5px;
}
.onlineHelp {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  .tools {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
    .page {
      display: inline-block;
      margin-right: 10px;
    }
  }
  .pdf-box {
    height: 100%;
    // overflow: auto;
    width: 90%;
  }
}
.dialog-box {
  /deep/.el-dialog__body {
    overflow: hidden !important;
  }
}
</style>
