/*
 * @Author: qiuwt
 * @Email: qiuwt@hxmec.com
 * @Date: 2020-10-13 17:09:15
 * @Last Modified by: qiuwt
 * @Last Modified time: 2020-11-03 15:31:27
 * @Description: pdf查看器
 */
<template>
    <div v-show="currentVisible"
         class="pdf-viewer-wrapper">
        <div v-show="loading"
             class="loading-wrapper">
            <i class="icon-loading" />
            <span class="text-loading">加载中...</span>
        </div>
        <div v-show="!loading"
             class="pdf-wrapper">
            <h3 class="pdf-title">
                {{ title }}
            </h3>
            <div class="pdf-content">
                <pdf :src="task"
                     :page="currentPage"
                     :style="`width: ${zoom}%;`"
                     class="pdf" />
            </div>
            <div class="pdf-tooltip">
                <div class="tooltip-wrapper">
                    <div class="tooltip-page">
                        <span @click="handlePdfFirstPage"
                              class="icon-start" />
                        <span @click="handlePdfPrevPage"
                              class="icon-prev" />
                        <span class="page-number">
                            {{ currentPage }}/{{ totalPage }}
                        </span>
                        <span @click="handlePdfNextPage"
                              class="icon-next" />
                        <span @click="handlePdfLastPage"
                              class="icon-end" />
                    </div>
                    <div class="tooltip-zoom">
                        <span @click="handleZoom('in')"
                              class="icon-zoom-in" />
                        <span @click="handleZoom('out')"
                              class="icon-zoom-out" />
                    </div>
                    <div class="tooltip-rotate">
                        <span @click="handlePdfDownload"
                              class="icon-download" />
                    </div>
                    <div class="tooltip-close">
                        <span @click="handleClose"
                              class="icon-close" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { isEmptyObj, download } from '../src/utils/util';
import pdf from './pdf/vuePdfNoSssNoWorker';

export default {
    name: 'PdfViewer',
    components: {
        pdf
    },
    props: {
        props: {
            type: Object,
            default: () => ({
                fileId: 'id',
                fileName: 'originalFileName',
                fileSuffix: 'ext',
                fileUrl: 'url'
            })
        },
        downloadFN: {
            type: [Function, String],
            default: ''
        }
    },
    data() {
        return {
            loading: true,
            title: '',
            task: '',
            url: '',
            suffix: '',
            currentPage: 1,
            totalPage: '',
            zoom: 40,
            currentVisible: this.visible,
            pdfInfo: {},
            pdfInfoOld: ''
        };
    },
    watch: {
        currentVisible(val, old) {
            if (val === old) return;
            if (val) {
                document.body.addEventListener('keydown', this.handleKeydownHide, false);
            }
        },
        pdfInfo: {
            handler(val) {
                if (JSON.stringify(val) === this.pdfInfoOld) return;
                this.loading = true;
                this.zoom = 40;
                this.pdfInfoOld = JSON.stringify(val);
                this.init();
            },
            deep: true
        }
    },
    methods: {
        /**
         * 显示内容
         */
        handleVisible(val) {
            if (val) {
                this.currentVisible = true;
                const { fileUrl, fileName } = this.props;
                if (typeof val !== 'object') {
                    // 补全
                    this.pdfInfo = {
                        [fileUrl]: val,
                        [fileName]: val
                    };
                } else if (val[fileUrl]) {
                    this.pdfInfo = val;
                } else {
                    this.currentVisible = false;
                    console.error('缺少有效地址');
                }
            }
        },
        init() {
            const { fileUrl, fileName } = this.props;
            if (isEmptyObj(this.pdfInfo)) return;
            const url = this.pdfInfo[fileUrl];
            this.task = pdf.createLoadingTask(url);
            this.url = url;
            this.title = this.pdfInfo[fileName];
            this.currentPage = 1;
            this.task.then(
                pdfTask => {
                    this.loading = false;
                    this.totalPage = pdfTask.numPages;
                },
                () => {
                    const tip = '文件解析失败，请检查文件！';
                    if (this.$message && this.$message.error) {
                        this.$message.error(tip);
                    } else {
                        console.error(tip);
                    }
                    this.loading = false;
                    this.handleClose();
                }
            );
        },
        /**
         * 查看pdf第一页
         */
        handlePdfFirstPage() {
            this.currentPage = 1;
        },
        /**
         * 查看pdf最后一页
         */
        handlePdfLastPage() {
            this.currentPage = this.totalPage;
        },
        /**
         * 查看pdf下一页
         */
        handlePdfNextPage() {
            if (this.currentPage < this.totalPage) this.currentPage += 1;
        },
        /**
         * 查看pdf上一页
         */
        handlePdfPrevPage() {
            if (this.currentPage > 1) this.currentPage -= 1;
        },
        /**
         * 下载pdf文件
         * @param {object} url 文件链接
         */
        handlePdfDownload() {
            const { fileName, fileUrl } = this.props;
            const name = this.pdfInfo[fileName];
            const url = this.pdfInfo[fileUrl];
            if (this.downloadFN) {
                this.downloadFN(this.pdfInfo);
            } else {
                download(url, name);
            }
        },
        /**
         * pdf缩放
         * @param {string} type 缩放类型
         */
        handleZoom(type) {
            if (type === 'in' && this.zoom < 100) {
                this.zoom += 10;
            } else if (type === 'out' && this.zoom > 10) {
                this.zoom -= 10;
            } else {
                this.$message({
                    message: '已经缩放到极限啦！',
                    type: 'warning'
                });
            }
        },
        handleKeydownHide(e) {
            if (e.key === 'Escape') {
                this.handleClose();
                e.stopPropagation();
            }
        },
        handleClose() {
            this.currentVisible = false;
            this.$emit('close');
            this.$emit('update:visible', false);
            document.body.removeEventListener('keydown', this.handleKeydownHide, false);
        }
    }
};
</script>

<style lang="less" scoped>
.pdf-viewer-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    .loading-wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -33.5px;
        margin-top: -33.5px;
        text-align: center;

        .icon-loading {
            display: block;
            width: 67px;
            height: 67px;
            background: url('../src/images/icon-loading.png') no-repeat;
            animation: rotating 0.5s linear infinite;
        }
        .text-loading {
            display: inline-block;
            margin-top: 10px;
            color: #fff;
            font-size: 14px;
        }
    }
    .pdf-wrapper {
        height: 100%;
    }
    .pdf-title {
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 14px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
        border-radius: 0 0 10px 0;
        background: #000;
    }
    .pdf-content {
        position: absolute;
        top: 40px;
        right: 40px;
        bottom: 80px;
        left: 40px;
        overflow: hidden;
        text-align: center;
        &::before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .pdf {
            display: inline-block;
            vertical-align: middle;
            width: 40%;
            max-height: 100%;
            overflow-y: scroll;
        }
    }
    .pdf-tooltip {
        position: absolute;
        bottom: 20px;
        width: 100%;
        height: 40px;
        text-align: center;
        font-size: 0;

        .tooltip-wrapper {
            display: inline-block;
            padding: 12px 20px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.6);
            box-sizing: border-box;
            border-radius: 20px;
        }
        .tooltip-page,
        .tooltip-zoom,
        .tooltip-rotate {
            display: inline-block;
            height: 100%;
            border-right: 1px solid rgba(255, 255, 255, 0.3);
        }
        .icon-prev,
        .icon-next,
        .icon-zoom-in,
        .icon-zoom-out,
        .icon-rotate,
        .icon-download,
        .icon-close,
        .icon-start,
        .icon-end {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: top;
            opacity: 0.8;
            transition: all 0.5 ease;
            cursor: pointer;
            &:hover {
                opacity: 1;
            }
        }
        .page-number {
            display: inline-block;
            margin: 0 15px;
            height: 16px;
            line-height: 16px;
            vertical-align: top;
            opacity: 0.8;
            font-size: 12px;
        }
        .tooltip-page {
            color: #fff;
            padding-right: 14px;
            margin-right: 14px;
            .icon-start {
                margin-right: 15px;
                background: url('../src/images/icon-start.png') no-repeat;
            }
            .icon-prev {
                background: url('../src/images/icon-prev.png') no-repeat;
            }
            .icon-next {
                background: url('../src/images/icon-next.png') no-repeat;
            }
            .icon-end {
                margin-left: 15px;
                background: url('../src/images/icon-end.png') no-repeat;
            }
        }
        .tooltip-zoom {
            padding-right: 14px;
            .icon-zoom-in {
                margin-right: 14px;
                background: url('../src/images/icon-zoom-in.png') no-repeat;
            }
            .icon-zoom-out {
                background: url('../src/images/icon-zoom-out.png') no-repeat;
            }
        }
        .tooltip-rotate {
            padding: 0 14px;
            .icon-rotate {
                margin-right: 14px;
                background: url('../src/images/icon-rotate.png') no-repeat;
            }
            .icon-download {
                background: url('../src/images/icon-download.png') no-repeat;
            }
        }
        .tooltip-close {
            display: inline-block;
            padding-left: 14px;
            .icon-close {
                background: url('../src/images/icon-close.png') no-repeat;
            }
        }
    }
    /deep/ .annotationLayer {
        display: none !important;
    }
}

@keyframes rotating {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
</style>