<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="url" :src="url" @load="handleIframeLoad" :name="'iframe' + name" ref="iframe" />
        <slot v-else></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
        }
    },
    computed: {
        active() {
            return this.$parent.currentName === this.name
        }
    },
    watch: {
        // 监听url变更：切换地址，重置加载状态
        url(newVal) {
            if (newVal) {
                this.loaded = false
            }
        },
        // 切换tab隐藏时重置状态
        active(val) {
            if (!val && this.url) {
                this.loaded = false
            }
        }
    },
    updated() {
        this.$parent.$emit('tab-nav-update')
    },
    methods: {
        handleIframeLoad(evt) {
            this.loaded = true
            this.$emit('onIframeLoad', this, evt)
        }
    }
}
</script>