<template>
    <div class="pdfLoad">
        <div class="pdfCtrl">
            <div class="ctrlStart">
                <!-- 缩略图菜单按钮 -->
                <!-- <div class="viewMenu"></div> -->
                <span class="pdfName">{{pdfName}}</span>
            </div>
            <div class="ctrlCenter">
                <div class="pageCtrl" >
                    <div class="pageNum">
                        <el-input v-model="changePageNum" @change="changePage"></el-input>
                    </div>
                    <span style="margin:0 5px 0 5px">/</span>
                    <span>{{pageTotalNum}}</span>
                </div>
                <span class="halvingLine">|</span>
                <div class="changeScale">
                    <div class="minus" @click="scaleSmall"></div>
                    <div class="csVal">
                        <el-input v-model="changeScaleVal"></el-input>
                    </div>
                    <div class="add" @click="scaleBig"></div>
                </div>
                <span class="halvingLine">|</span>
                <div class="ctrlStyle">
                    <!-- 缩放适应宽度按钮 -->
                    <!-- <div class="ctrlPageScale"></div> -->
                    <div class="rotate" @click="counterClock"></div>
                </div>
            </div>
            <div class="ctrlEnd">
                <!-- <div class="ctrlEndMenu moreMenu"></div> -->
                <div class="ctrlEndMenu print" @click="pdfPrintAll"></div>
                <div class="ctrlEndMenu download" @click="pdfDownload"></div>
            </div>
        </div>
        <div class="pdfDom">
            <pdf 
            ref="pdf"
            :src="pdfUrl"
            :page="pageNum"
            :rotate="pageRotate"  
            @progress="loadedRatio = $event"
            @page-loaded="pageLoaded($event)" 
            @num-pages="pageTotalNum=$event" 
            @error="pdfError($event)" 
            @link-clicked="page = $event"
            ></pdf> 
          <!-- <pdf  v-for="i in numPages" :key="i"  :src="pdfsrc" :page="i"></pdf> -->
        </div>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
    components: {
        pdf
    },
    mounted() {
        // this.getNumPages(this.pdfUrl)
    },
    props:{
        pdfPath:{
            require:true
        }
    },
    data(){
        return{
            pdfName:'DBFGLX_202108051103.pdf',
            pdfUrl:'static/data/DBTRSF_202110201117536410.pdf',
            pageNum: 1,
            pageTotalNum: 1,
            changePageNum:1,
            pageRotate: 0,
            // 加载进度
            loadedRatio: 0,
            curPageNum: 0,
            numPages:1,
            changeScaleVal:"100%",
            // pdfsrc:'',
            pdfScale:100
        }
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            const pos = this.pdfPath.lastIndexOf("/");
            this.pdfName = this.pdfPath.substr(pos+1)
            this.pdfUrl = this.configration.urlprefix.pdfUrlPrefix+this.pdfName;
        },
        getNumPages(url) {
            var loadingTask = pdf.createLoadingTask(url)
            loadingTask.promise.then(pdf =>{
                this.pdfsrc = loadingTask
                this.numPages = pdf.numPages
                this.pageTotalNum = pdf.numPages
            }).catch((err) => {
                console.error('pdf加载失败')
            })

        },
        // 上一页函数
        prePage() {
            var page = this.pageNum
            page = page > 1 ? page - 1 : this.pageTotalNum
            this.pageNum = page
        },
        nextPage() {
            var page = this.pageNum
            page = page < this.pageTotalNum ? page + 1 : 1
            this.pageNum = page
        },
        changePage(){
            if(this.changePageNum <= 0 || this.changePageNum > this.pageTotalNum)return;
            var page = Number(this.changePageNum)
            this.pageNum = page
        },
        // 页面逆时针翻转90度。
        counterClock() {
            this.pageRotate -= 90
        },
        // 页面加载回调函数，其中e为当前页数
        pageLoaded(e) {
            this.curPageNum = e
        },
        // 其他的一些回调函数。
        pdfError(error) {
            console.error(error)
        },
        scaleBig() {
            this.pdfScale += 5;
            this.$refs.pdf.$el.style.width = parseInt(this.pdfScale) + "%";
            this.changeScaleVal = parseInt(this.pdfScale) + "%"
        },
        scaleSmall() {
            this.pdfScale += -5;
            this.$refs.pdf.$el.style.width = parseInt(this.pdfScale) + "%";
            this.changeScaleVal = parseInt(this.pdfScale) + "%"
        },
        //下载PDF
        pdfDownload () {
            var url = this.pdfUrl
            var tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = url
            tempLink.setAttribute('download', 'my.pdf')
            if (typeof tempLink.download === 'undefined') {
                tempLink.setAttribute('target', '_blank')
            }
            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
        },
        pdfPrintAll() {
	        this.$refs.pdf.print()
		},

    }
}
</script>
<style scoped lang="less">
.padLoad{
    width: 100%;
    height: 100%;
}
.pdfCtrl{
    // width: 100%;
    height: 56px;
    background-color: rgb(50,54,57);
    color: white;
    // padding: 0 16px;
    font-size: 15px;
}
.ctrlStart {
    width: 25%;
    height: 100%;
    float: left;
    align-items: center;
    display: flex;
    overflow: hidden;
    padding-inline-end: 20px;
    vertical-align: middle;
    .viewMenu{
        width: 24px;
        height: 24px;
        margin:3px 0 0 3px;
        background-image: url(/static/images/menu.svg);
        cursor: pointer;
    }
    .pdfName {
        font-size: 0.87rem;
        font-weight: 500;
        margin-inline-start: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: gray;
    }
}

.ctrlCenter{
    width: 50%;
    float: left;
    height: inherit;
    line-height: 56px;
    text-align: center;
    .pageCtrl{
        float: left;
        display: flex;
    }
    .changeScale{
        float: left;
        display: flex;
        align-items: center;
        vertical-align: middle;
        .minus{
            width: 20px;
            height: 20px;
            background-image: url(/static/images/minus.svg);
            cursor: pointer;
        }
        .csVal{
            margin: 0 4px 0 6px;
        }
        .add{
            width: 20px;
            height: 20px;
            background-image: url(/static/images/add.svg);
            cursor: pointer;
        }
    }
    .ctrlStyle{
        // width: calc(35% - 21px);
        height: inherit;
        float: left;
        display: flex;
        align-items: center;
        vertical-align: middle;
        .ctrlPageScale{
            width: 20px;
            height: 20px;
            margin: 0 10px 0 10px;
            background-image: url(/static/images/ctrlPageScale.svg);
            cursor: pointer;
        }
        .rotate{
            width: 20px;
            height: 20px;
            background-image: url(/static/images/rotate.svg);
            cursor: pointer;
        }
    }
}
/deep/.csVal .el-input__inner {
    background-color: #0e0e0e;
    border-radius: 1px;
    border: 1px solid rgb(50,54,57);
    height: 26px;
    line-height: 26px;
    padding: 0;
    width: 50px;
    color: white;
    text-align: center;
}
/deep/.pageNum .el-input__inner {
    -webkit-appearance: none;
    background-color: #0e0e0e;
    background-image: none;
    border-radius: 1px;
    border: 1px solid rgb(50,54,57);
    box-sizing: border-box;
    font-size: inherit;
    height: 26px;
    line-height: 17px;
    outline: 0;
    padding: 0;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 22px;
    color: white;
    text-align: center;
}
.ctrlEnd{
    padding-inline-end: 20px;
    // width: calc(25% - 40px);
    height: inherit;
    float: right;
    line-height: 56px;
    text-align: end;
    i{
        margin: 0 6px 0 6px;
        font-size: 16px;
    }
}
// 分割线
.halvingLine{
    float:left;
    margin: 0 10px 0 10px;
    color: #c1bdbd;
    width: 3px;
}

.ctrlEndMenu{
    width: 20px;
    height: 20px;
    float: right;
    margin: 18px 0 0 6px;
    cursor: pointer;
}
.download{
    background-image: url(/static/images/download.svg);
}
.print{
    background-image: url(/static/images/print.svg);
}
.moreMenu{
    background-image: url(/static/images/moreMenu.svg);
}
.pdfDom{
    width: inherit;
    height: 883px;
    background-color: white;
    overflow: hidden;
    overflow-y: auto;
    overflow-x: auto;
}
</style>
