<template>
    <div class="page">
        <headNav :title="title"></headNav>

        <div class="content" v-if="url">
            <pdf
                v-for="i in numPages"
                :key="i"
                :src="src"
                :page="i"
                style="display: inline-block; width: 100%"
            ></pdf>
        </div>

        <v-mask :showOverLay="showOverLay" tipMsg="加载中..."></v-mask>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import mask_overLay from "@/components/overLay_xy.vue";
import pdf from 'vue-pdf'

export default {
    components: {
        headNav,
        "v-mask": mask_overLay,
        pdf,
    },
    computed: {
        url() {
            return this.$route.params.url
        },
        title() {
            return this.$route.params.title || '文件预览'
        }
    },
    data () {
        return {
            showOverLay: false,
            pageNum: 1,
            src: null,
            numPages: 0,
        }
    },
    mounted () {
        if (this.url) {
            this.initPdf();
        }
    },
    methods: {
        initPdf() {
            this.showOverLay = true;
            const loadingTask = pdf.createLoadingTask(this.url);
            this.src = loadingTask;
            loadingTask.promise.then(pdf => {
			    this.numPages = pdf.numPages;
                this.showOverLay = false;
		    }).catch(err => {
                this.showOverLay = false;
                const msg = err && err.message ? `文件不存在！[${err.message}]` : '文件不存在！';
                this.$toast.fail(msg);
            });
        }
    }
}
</script>

<style lang="scss">
.content {
    margin-top: 48px !important;
    height: calc(100vh - 48px) !important;
}
iframe {
    width: 100%;
    height: 100%;
}
</style>