<template>
    <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>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    name: 'pdfPreview',
    props: {
        url: {
            type: String,
            default: ''
        }
    },
    components: {
        pdf,
    },
    data () {
        return {
            pageNum: 1,
            src: null,
            numPages: 0,
        }
    },
    created () {
        if (this.url) {
            this.initPdf();
        }
    },
    methods: {
        initPdf() {
            this.showOverLay = true;
            const loadingTask = pdf.createLoadingTask({
                url: this.url,
                cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
                cMapPacked: true
            });
            this.src = loadingTask;
            loadingTask.promise.then(pdf => {
			    this.numPages = pdf.numPages;
                this.showOverLay = false;
		    });
        }
    }
}
</script>