<template>
    <div class="pdf">
        <div class="pdf-des">
            <div class="fl header">文件名称</div>
            <div class="fr">
               <span>{{page}} / {{pageTotal}}</span>
            </div>
        </div>
        <div class="pdf-main" ref="pdf-main" id="masks" style="position:relative;">
            <div id="floatmask"></div>
            <!-- <div id='floatmask' style='position: absolute; left: 32%; top: 5%;z-index:100;width:0px;height:0px;background-color:rgba(242,129,3,0.5);'></div> -->
            <img width="100%" id="Preview" :src="gerImg" />
        </div>
    </div>
</template>
<script type="text/javascript">
    export default{
        name: 'PDF',
        props: ['PDFH','fileInfo','pageNum','pageTotal'],
        data(){
            return {
                page: 1,
                record_scroll_top: 0,
                disabled_wheel: '',
                disabled_wheel_time_id: '',
                hight_key_page: null,
                hightKeyPosition : [],
                valueWord:'',
                coordinate:[]
            }
        },
        created(){

        },
        mounted(){
            this.$nextTick( () => {
                let self = this;
                self.$refs['pdf-main'].onmousewheel = function(e){
                    let ev = e || window.event;
                    let main_offsetHeight = this.offsetHeight;
                    let main_scrollHeight = this.scrollHeight;
                    let scroll_top_max = main_scrollHeight - main_offsetHeight - 10;
                    let scroll_top = this.scrollTop;
                    self.record_scroll_top = scroll_top;
                    if(ev.wheelDeltaY > 0){ // 向上
                        if(!!self.disabled_wheel && self.disabled_wheel == 'up'){
                        }else{
                            if(main_offsetHeight >= main_scrollHeight || (scroll_top == 0 && self.record_scroll_top == 0)){  // 没有滚动条或者滚动条在最上方
                                if(self.page == 1){
                                    self.$notify({
                                        title: '提示',
                                        message: '已经是第一页了',
                                        type: 'warning',
                                        duration: 1500
                                    });
                                    self.disabled_wheel = 'up';
                                    return false;
                                }
                                self.prevPage();
                                self.disabled_wheel = 'up';
                            }
                        }
                    }else if(ev.wheelDeltaY < 0){ // 向下
                        if(!!self.disabled_wheel && self.disabled_wheel == 'down'){
                        }else{

                            if(main_offsetHeight >= main_scrollHeight || (scroll_top >= scroll_top_max && self.record_scroll_top >= scroll_top_max)){
                                if(self.page == self.pageTotal){
                                    self.$notify({
                                        title: '提示',
                                        message: '已经是最后一页了',
                                        type: 'warning',
                                        duration: 1500
                                    });
                                    self.disabled_wheel = 'down';
                                    return false;
                                }
                                self.nextPage();
                                self.disabled_wheel = 'down';
                                this.scrollTop = 0;
                            }
                        }
                    }
                }
            });
            this.$bus.on('updateHightKey',parmas => {
                if(parmas instanceof Object){
                    this.hight_key_page = parmas.hightKeyPage;
                    this.valueWord = parmas.valueWord;
                    this.coordinate = JSON.parse(parmas.keyPosition);
                    if(parmas.keyPosition instanceof Array){
                        this.hightKeyPosition = parmas.keyPosition;
                    }else{
                        this.hightKeyPosition = [];
                    }
                    this.setKeyHight();
                    // debugger
                    this.$nextTick( () => {
                        // let res = this.compute(parmas.keyPosition);
                        // this.setHight(parmas,res.lefts,res.tops,res.widths,res.heights);
                    });
                }
            });
            this.$bus.on('ocrScroll',msg => {
                $('.pdf-main').scrollTop(msg)
            })
        },
        computed:{
            gerImg(){
                if(!!this.fileInfo.singlePagePdf){
                    return `/folder/showPic?filePath=${this.fileInfo.singlePagePdf}`;
                }
                return false;
            }
        },
        methods: {
            setKeyHight(){
                let floatmasks = document.querySelectorAll('div[id^=floatmask]');
                this.del_highLight();
                let width,
                height,
                left,
                top;
                let ContScale = (2480/(this.$refs['pdf-main'].clientWidth)).toFixed(2)     //计算坐标缩放比
                for(let i=0;i<this.coordinate.length;i++){
                    width = (this.coordinate[i].bot.x -  this.coordinate[i].top.x)/ContScale;
                    height = (this.coordinate[i].bot.y -  this.coordinate[i].top.y)/ContScale;
                    left = (this.coordinate[i].top.x)/ContScale;
                    top = (this.coordinate[i].top.y)/ContScale;
                    this.add_div(i,left,top,width,height);
                }
            },
            add_div(detail_div,x,y,width,height){
                let div = document.createElement('div');
                div.id = 'floatmask' + detail_div;
                document.getElementById('masks').appendChild(div);
                jQuery("body,html").scrollTop(y);
                jQuery('#'+div.id+'').css({"background-color":"rgba(245,245,44,.6)","position":"absolute","left":x,"top":y,"width":width+"px","height":height+"px","z-index":100})
            },
            del_highLight(){
                let floatmasks = document.querySelectorAll('div[id^=floatmask]');
                for(let i = 0,l = floatmasks.length;i < l;i ++){
                    document.getElementById("masks").removeChild(floatmasks[i]);
                }
            },
            setHight(obj,xs,ys,widths,max_heights){
                let floatmasks = document.querySelectorAll('div[id^=floatmask]');
                for(let i = 0,l = floatmasks.length;i < l;i ++){
                    document.getElementById("masks").removeChild(floatmasks[i]);
                }
                for(let i=0;i<xs.length;i++){
                    let x = xs[i];
                    let y = ys[i];
                    let width = widths[i];
                    let max_height = max_heights[i] * 1.1;
                    let left_preview=jQuery('#Preview').position().left;
                    let ratio=document.all.Preview.width/document.all.Preview.naturalWidth;
                    x=x*ratio-3;
                    y=y*ratio;
                    x=x+left_preview;
                    y=y;
                    width*=ratio;
                    max_height*=ratio;
                    jQuery("body,html").scrollTop(y);
                    this.add_div(i,x,y,width,max_height);
                }
            },
            compute(arr){
                //计算行数
                let arr_left = [arr[0][0]];
                let arr_top = [arr[0][1]];
                let arr_width = [];
                let arr_height = [arr[0][3]];
                let prev_row_last_index = 0;
                for(let i = 1,l = arr.length;i < l;i ++){
                    let item = arr[i];
                    let prev = arr[i-1];

                    if((item[1] - prev[1]) > item[3]/2){
                        let width = (prev[0] - arr[prev_row_last_index][0] < item[2]) ? item[2] : prev[0] - arr[prev_row_last_index][0] +  prev[2];
                        arr_left.push(item[0]);
                        arr_top.push(item[1]);
                        arr_width.push(width);
                        arr_height.push(item[3]);
                        prev_row_last_index = i;
                    }
                    if( i == l -1){
                        arr_width.push(arr[l-1][0] - arr[prev_row_last_index][0] + arr[l-1][2]);
                    }
                }

                return {
                    lefts: arr_left,
                    tops: arr_top,
                    widths: arr_width,
                    heights: arr_height,
                }
            },
            prevPage(){
                this.page--;
                this.del_highLight();
                if(this.page < 1){
                    this.page = 1;
                }
            },
            nextPage(){
                this.page++;
                this.del_highLight();
                if(this.page > this.pageTotal){
                    this.page = this.pageTotal;
                }
            },
            updateDisableWheelType(){
                if(!!this.disabled_wheel_time_id){
                    return false;
                }
                this.disabled_wheel_time_id = setTimeout( () => {
                    this.disabled_wheel = '';
                    this.disabled_wheel_time_id = '';
                },1500);
            }
        },
        watch: {
            pageNum(newVal){
                this.page = newVal;
            },
            page(newVal,oldval){
                if((newVal !== oldval) && (newVal != this.pageNum)){
                    this.$bus.emit('updatePageNum',newVal);
                }
            },
            disabled_wheel(newVal,oldval){
                this.updateDisableWheelType();
            }
        }
    }

</script>
<style type="text/css" scoped>
    .pdf{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .pdf-des{
        padding: 0px 20px;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: #f3f4f6;
    }
    .pdf-des .header{
        font-weight: 900;
        color: rgba(60,68,85,0.7);
        font-size: 14px;
    }

    .pdf-main{
        width: 100%;
        height: calc(100% - 35px);
        overflow: auto;
        transform: translate(0px,0px);
    }
</style>
