<template>
    <div class="ocr">
        <div class="ocr-des">
            <div class="fr">
                <el-input type="text" name="" prefix-icon="el-icon-search" clearable v-model="searchkey" placeholder="请输入关键字"></el-input>
                <span>{{page}} / {{pageTotal}}</span>
            </div>
        </div>
        <div class="ocr-main" ref="ocr-main">
        </div>
    </div>
</template>
<script type="text/javascript">
import { log } from 'util';
    export default{
        name: 'OCR',
        props: ['fileInfo','pageNum','pageTotal'],
        data(){
            return {
                page: 1,
                searchKeyword: '',
                currentPage: 1,
                ocrTextAry: [],
                iframeUrl: '',
                instance: null,
                prev_searchKeyword: '',
                keyWords: [],
                hightKeyPosition: [],
                hight_key_page: null,
                record_scroll_top: 0,
                disabled_wheel: '',
                disabled_wheel_time_id: '',
                message: "",
                searchkey: '',
                search_delay: '',
                valueWord:'',
                divTextCopy:'',
                htmlCopy:'',
                htmlCopy2:'',
                flag:false,
                clickId:0
            }
        },
        mounted(){
            let self = this;
            $('.ocr-main').on('scroll',function(e){
                self.$bus.emit('ocrScroll',e.target.scrollTop);
            })
            this.$nextTick( () => {
                // this.getMessage();
                self.$refs['ocr-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.$nextTick( () => {
                        this.setHight();
                    });
                }
            });
        },
        beforeDestroy () {
            this.$bus.$off('updateHightKey');
        },
        methods: {
            getMessage(){
                let message = '';
                $('.html-div-box').find('div').each((index,item) => {
                    message += $(item).text();
                });
                this.message = message;
                this.$nextTick( () => {
                    this.handleSearch();
                });
            },
            handleSearch(){
                this.search_delay = '';
                if(!this.searchkey){
                    $('.html-div-box').html(this.htmlCopy);
                    return false;
                }
                let key = this.searchkey;
                // if(this.htmlCopy.includes(key)){
                //     $('.html-div-box').html(this.htmlCopy.replace(key, "<span class='result'>" + key + "</span>")); // 高亮操作
                // }
                var regExp = new RegExp(key+'(?!([^<]+)?>)', 'ig');
                $('.html-div-box').html(this.htmlCopy.replace(regExp, "<span class='result'>" + key + "</span>")); // 高亮操作
            },
            setHtml(){
                this.$refs['ocr-main'].innerHTML = '';
                let $nodes = $(this.fileInfo.singlePageHtml);
                let contScale = ((this.$refs['ocr-main'].clientWidth)/2479).toFixed(3);
                let htmldivbox = '<div class="html-div-box">';
                if(!!$nodes && $nodes.length > 0){
                    for(let i = 0,l = $nodes.length;i < l; i++){
                        if($nodes[i].localName == 'div'){
                            $nodes[i].style.top = (parseInt(($nodes[i].style.top))*contScale).toFixed(2) + "px";
                            $nodes[i].style.left = (parseInt(($nodes[i].style.left))*contScale).toFixed(2) + "px";
                            $nodes[i].style.fontSize = (parseInt(($nodes[i].style.fontSize))*contScale).toFixed(2) + "px";
                            htmldivbox += $nodes[i].outerHTML;
                        }
                    }
                }
                htmldivbox += '</div>'
                this.$refs['ocr-main'].appendChild($(htmldivbox)[0]);
                this.$nextTick( () => {
                    this.htmlCopy = $('.html-div-box').html();
                    this.htmlCopy2 = $('.html-div-box').html();
                    this.setHight();
                    this.getMessage();
                })
            },
            setHight(){
                if(!!this.$refs['ocr-main'] && this.hight_key_page == this.page){ //  this.hight_key_page == this.page  判断高关键字坐标所在页码 与当前页码一致
                    let key = this.valueWord; 
                    var regExp = new RegExp(key+'(?!([^<]+)?>)', 'ig');
                    $('.html-div-box').html(this.htmlCopy2.replace(regExp, "<span class='result'>" + key + "</span>"));  
                    this.htmlCopy = $('.html-div-box').html()
                }else{
                    return false;
                }
            },
            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]);
                }
            },
            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: {
            searchkey(value){
                this.search_delay = setTimeout( () => {
                    if(!!this.search_delay){
                        clearTimeout(this.search_delay);
                    }
                    this.handleSearch();
                },200)
            },
            fileInfo(newVal,oldVal){
                if(newVal){
                    this.$nextTick( () => {
                        this.setHtml();
                    })
                }
            },
            pageNum(newVal,oldval){
                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>
    .ocr{
        width: 100%;
        height: 100%;
    }
    .ocr-des{
        padding: 0px 20px;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: #f3f4f6;
    }
    .ocr-des .header{
        font-weight: 900;
        color: rgba(60,68,85,0.7);
        font-size: 14px;
    }
    .ocr-des .header .searchIcon{
        position: relative;
        left: 20px;
    }
    .ocr-des .header .searchKeyword{
        padding-left: 20px;
        width: 200px;
        height: 26px;
        border-radius: 13px;
        border: 1px solid #dbdcdc;
        outline: none;
    }
    .ocr-main{
        width: 100%;
        height: calc(100% - 35px);
        overflow: auto;
    }

    ul{
        padding: 20px;
    }

    li{
        line-height: 28px;
        font-size: 14px;
    }
</style>
<style type="text/css">
    mark{
        background-color: #ffdab2;
    }
    .html-div-box{
        position: relative;
        width: 100%;
        height: 100%;
        white-space: nowrap;
    }
    .html-div-box div{
        -webkit-text-size-adjust: auto;
    }
    .ocr-des .el-input{
        width: auto;
    }
    .ocr-des .el-input__inner{
        height: 26px;
        line-height: 26px;
    }
    .ocr-des .el-input__suffix .el-input__icon{
        line-height: 26px;
    }
    .ocr-des .el-input__prefix .el-input__icon{
        line-height: 26px;
    }
    .ocr-des .el-button--mini{
        padding:5px 10px;
    }
    .ocr-des .el-button+.el-button{
        margin-left:0;
    }
    .html-div-box div{
        position: absolute;
        white-space: nowrap;
    }

    .html-div-box .active-hight{
        height: 60px !important;
        background: #F5F52C !important;
    }

    /* .html-div-box .bright{
        background: yellow;
    } */

    .html-div-box .searched{
        background: #F28103 !important;
    }
    .hight_bg{
        background-color:rgba(245,245,44,.6)
    }
    .result{
        background: yellow;
    }
</style>
