<template>
    <div>
        <div v-if="loading" class="loading">
            加载中，请稍候...</div>
        <canvas class="pdf-canvas" id="pdf-canvas"></canvas>
    </div>
</template>

<script>
    import * as pdfjs from "pdfjs-dist";
    import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
    import {SET_TOTAL_PAGES} from "../../../store/types/pdf-types";
    import {mapState} from "vuex";
    pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

    export default {
        name: "Pdf.vue",
        data() {
            return {
                loading: true,
                //src: "https://seec-portal.oss-cn-hangzhou.aliyuncs.com/1/07-%E9%9C%80%E6%B1%82%E6%96%87%E6%A1%A3%E5%8C%96%E4%B8%8E%E9%AA%8C%E8%AF%81.pdf"
            };
        },
        mounted() {
            console.log(this.src);
            this.loading = true;
            this._canvas = document.getElementById("pdf-canvas");
            this._context = this._canvas.getContext("2d");

            // Default size
            this._canvas.height = 500;
            this._canvas.width = 800;

            if (this.src) {
                this.load(this.src);
            } else {
                // ! 1秒后重试
                setTimeout(() => {
                    this.load(this.src);
                }, 10000);
            }

        },
        computed: {
            ...mapState({
                src: state => state.pdf.src,
                currentPage: state => state.pdf.currentPage,
                screenShot: state => state.pdf.screenShot,
                focus: state => state.pdf.focus
            }),
        },
        watch: {
            currentPage() {
                this.showPage();
            }
        },
        methods: {
            load(src) {
                console.log(src);
                const loadingTask = pdfjs.getDocument(src);
                loadingTask.promise.then(pdf => {
                    this.loading = false;
                    this._pdf = pdf;
                    this.$store.commit(SET_TOTAL_PAGES, {totalPages: pdf.numPages});
                    this.showPage();
                });
            },
            showPage() {
                this._pdf && this._pdf.getPage(this.currentPage || 1).then(page => {
                    const scale = 1;
                    const viewport = page.getViewport({scale: scale});

                    this._canvas.height = viewport.height;
                    this._canvas.width = viewport.width;

                    const renderContext = {
                        canvasContext: this._context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            }
        }
    };
</script>

<style>
    .pdf-canvas {
        z-index: 0;
        outline: none;
        display: block;
        direction: ltr;
        margin: 0 auto;
        background-color: white;
        max-width: 100vw;
        max-height: 100vh;
    }

    .loading, .focus-mask {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        color: #7a8a9a;
        font-size: 40px;
    }

</style>
