<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" :src="url" @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(){
        return {
            loaded: false,
            hasUrl:this.url==null||this.url==''
        }
    },
    computed:{
        active(){
            const active = this.$parent.currentName === this.name;
            return active;
        }
    },
    updated() {
        this.$parent.$emit('tab-nav-update');
    },
    methods:{
        handleIframeLoad(evt){
            let ifm = this.$refs['iframe'];
            if(ifm&&ifm.src!=="about:blank"){
                this.loaded=true;
            }else{                
                if(ifm&&ifm.contentWindow.document.body.innerHTML==""){
                    this.loaded=false;
                }else{
                    this.loaded=true;
                }
            }
            this.loaded&&this.$emit('onIframeLoad',this,evt);
        }
    }
}
</script>