<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,
            loadTimer: null
        }
    },
    computed:{
        active(){
            const active = this.$parent.currentName === this.name;
            return active;
        },
        // ✅ hasUrl改为计算属性
        hasUrl(){
            return this.url == null || this.url == ''
        }
    },
    watch:{
        active(val){
            if(val && this.url){
                this.loaded = false;
                this.resetLoadTimer();
            }
        },
        // url发生变化，重置加载状态
        url(){
            if(this.active){
                this.loaded = false;
                this.resetLoadTimer();
            }
        }
    },
    updated() {
        this.$parent.$emit('tab-nav-update');
    },
    beforeDestroy(){
        this.clearTimer();
    },
    methods:{
        clearTimer(){
            if(this.loadTimer){
                clearTimeout(this.loadTimer);
                this.loadTimer = null;
            }
        },
        resetLoadTimer(){
            this.clearTimer();
            this.loadTimer = setTimeout(()=>{
                this.loaded = true;
            },12000)
        },
        handleIframeLoad(evt){
            // iframe正常触发load，清除定时器，结束loading
            this.clearTimer();
            this.loaded=true;
            this.$emit('onIframeLoad',this,evt);
        }
    }
}
</script>