<template>
   <div class="pl-tabs-panel" :title="title" v-show="active" >
       <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
       <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe>
       <slot v-if="!hasUrl"></slot>
    </div>
</template>

<script>
export default {
    name:'PTabpanel',
    props:{
        close:[String,Number,Boolean],
        itemData:Object,
        title:{
            type:String,
            default:""
        },
        name:{
            type:[String,Number],
            default:""
        },
        url:{
            type:[String],
            default:""
        },
        index:[String,Number]
    },
    data(){
        debugger
        return {
            scrollTop: 0,
            loaded: false,
            hasUrl:!(this.url==null||this.url=='')
        }
    },
    computed:{
        active(){
            const active = this.$parent.currentName === this.name;
            return active;
        }
    },
    watch:{
        active(val){ 
            let ifm = this.$refs["iframe"];
            if(val){
                this.setIframeSrc();
                if (ifm&&ifm.contentDocument) { 
                    this.$nextTick(()=>{
                        //保持原有的滚动位置
                        ifm.contentDocument.documentElement.scrollTop=this.scrollTop;
                    });
                }
            }else{
                if (ifm&&ifm.contentDocument) { 
                        //保持原有的滚动位置
                    this.scrollTop = ifm.contentDocument.documentElement.scrollTop;
                }
            }
        }
    },
    updated() {
        this.$parent.$emit('tab-nav-update');
    },
    mounted(){
        debugger
        if(this.active){
            // console.log('___________ mounted active ! setIframeSrc')
            this.setIframeSrc();
        }
    },
    beforeDestroy() {
        // this.offIframeScroll();
    },
    methods:{
        setIframeSrc(){
        debugger
            let ifm = this.$refs['iframe'];
            if(!this.hasUrl||this.loaded==true){
                if (ifm&&ifm.contentDocument) {                   
                    ifm.contentWindow.document.body.scrollTop =  this.scrollTop;
                }
                return;
            }
            if(ifm&&this.url.indexOf("about:blank")<0){
                this.loaded = false;
                ifm.setAttribute('src',this.url);
            }else{
                this.loaded = true;
            }
        },
        reload(){
            let ifm = this.$refs['iframe'];
            this.loaded=false;
            // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href);
            ifm.contentWindow.location.reload(); 
        },
        handleIframeLoad(evt){
            // if(this.active==false){     
            //     //如果没有被激活，就不加载           
            //     return;
            // }
            let ifm = this.$refs['iframe'];
            if(this.title==""&& ifm.contentWindow.document.title!=""){
                this.$emit("update:title", ifm.contentWindow.document.title);
            }
             
            if(ifm.src!=''&&ifm.src!=="about:blank"){
                this.loaded=true;
            }else{                
                if(ifm.contentWindow.document.body.innerHTML==""||ifm.contentWindow.document.head.innerHTML==""){
                    this.loaded=false;
                }else{
                    this.loaded=true; 
                }
            }

            if (ifm.contentDocument) { 
                ifm.contentWindow.window.addEventListener('beforeunload',()=>{
                    this.loaded=false;//右击刷新 时进行加载状态
                });
            }

            this.loaded&&this.$emit('onIframeLoad',this,evt);
        },
    }
}
</script>