<template>
    <div ref="stPdf">
        <el-button
                class="icon-qdf-screen"
                :class="fullscreenclass"
                type="primary"
                circle
                title="全屏显示"
                @click="fullscreenToggle"
        >
        </el-button>
        <el-button
                v-if="pdfBtnShow"
                class="icon-qdf-screen"
                :class="gonativeclass"
                type="primary"
                circle
                title="浏览器中显示"
                @click="goNative"
        >
        </el-button>
        <fullscreen
                class="pdf-fullscreen"
                ref="stFullscreen7789"
                @change="fullscreenChange"
                v-infinite-scroll="loadPdf"
                :infinite-scroll-immediate="false"
                style="overflow:auto"
        >
            <pdf v-if="pdfShow"
                 v-for="i in numPages"
                 :key="i"
                 :src="src"
                 :page="i"
                 style="display: inline-block; width: 100%"
                 @loaded="stLoaded"
            ></pdf>
        </fullscreen>



    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    import * as kejian from '@/api/peixun/kejian';

    export default {
        name:       'MtaBusPdfPlayer',
        props:    {
            options: {
                type: Object,
                default() {
                    return {};
                },
            },
            loaded: {
                type: Boolean,
                default() {
                    return true;
                },
            },
        },
        components: {
            pdf,
        },
        data() {
            return {
                url: '',
                src: null,
                numPages: undefined,
                totalPages: undefined,
                pdfShow: false,
                fullscreenclass: '',
                gonativeclass: '',
                stProgress: 0,
                pageRendered: false,
                pdfBtnShow: false,
                pdfLoadCnt: 0,
            };
        },
        methods:    {
            initPdf() {
                if (window.loading) {
                    window.loading.close();
                }
                this.pdfShow = false;
                this.pdfLoadCnt = 0;
                this.$emit('update:loaded', false);
                window.loading = this.$loading({
                                                  background: "rgba(0, 0, 0, 0.7)",
                                                  target:      '.pdf-fullscreen',                    // 需要遮罩的区域
                                                  body:        false,
                                              });
                kejian.getKejian({
                                     kjId: this.options.kjId
                                 }).then(res=> {
                    if (res.code === 0) {

                        this.url = res.data.newUrl;
                        this.src = pdf.createLoadingTask(res.data.newUrl);
                        /*//大于50M显示按钮
                        if(res.data.size > 52428800){
                            this.pdfBtnShow = true;
                        }else{
                            this.pdfBtnShow = false;
                        }*/
                        this.src.promise.then(res => {
                            window.loading.close();
                            // console.log(res);
                            if (res.numPages > 100) {
                                this.numPages = 100;
                                this.totalPages = res.numPages;
                            } else {
                                this.numPages = res.numPages;
                                this.totalPages = res.numPages;
                            }
                            //大于200页显示按钮
                            if (res.numPages > 200) {
                                this.pdfBtnShow = true;
                            }else {
                                this.pdfBtnShow = false;
                            }
                            this.pageRendered = true;
                            this.pdfShow = true;
                        });
                    }
                });
            },
            loadPdf() {
                // console.log('loadPdf');
                if (this.pageRendered && this.numPages < this.totalPages) {
                    if (this.totalPages - this.numPages > 100) {
                        this.numPages = this.numPages + 100;
                    } else {
                        this.numPages = this.totalPages;
                    }
                }
            },
            fullscreenChange(fullscreen) {
                this.fullscreen = fullscreen;
            },
            fullscreenToggle() {
                this.$refs['stFullscreen7789'].toggle(); // recommended
            },
            goNative() {
                window.open(this.url);
            },
            stLoaded() {
                this.pdfLoadCnt ++;
                if (this.pdfLoadCnt > this.totalPages - 2 || this.pdfLoadCnt > 99) {
                    setTimeout(()=>{
                        this.$emit('update:loaded', true);
                    }, 1000);

                }
            },
        },
        mounted() {
            if (this.options.type === 1) {
                this.fullscreenclass = 'fullscreenclassa'
                this.gonativeclass = 'gonativeclassa'
            } else {
                this.fullscreenclass = 'fullscreenclassc'
                this.gonativeclass = 'gonativeclassc'
            }
            this.initPdf();
        },
        watch: {
            options:            {
                handler(value, oValue) {
                    this.initPdf();
                },
            },
        }
    };
</script>
<style lang="scss" scoped>
    .el-button {
        font-size: 14px;
    }

    .fl {
        display: block;
        float: left;
    }

    .ml-30 {
        margin-left: 30px;
    }

    .st-aplayer {
        width: 320px;
        margin: 0 auto;
    }

    .icon-qdf-screen {
        position: absolute;
        right: 30px;
        background-color: transparent;
        border: transparent;
    }
    .icon-qdf-screen:hover{
        background-color: transparent;
        border: transparent;
    }

    .fullscreenclassa {
        top: 70px;
        z-index: 66;
    }
    .gonativeclassa {
        top: 130px;
        z-index: 66;
    }

    .fullscreenclassc {
        top: 30px;
        z-index: 3;
        background-image: url("../../assets/images/icons/pdf-full-screen.svg");
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .gonativeclassc {
        top: 90px;
        z-index: 3;
        background-image: url("../../assets/images/icons/pdf-jump.svg");
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .pdf-fullscreen {
        height: calc(100vh - 322px);
    }
    .go-native {
        top: 120px;
        z-index: 3;
    }
</style>
