<template>
    <div :class="`${prefixCls}-pane`" v-show="show"><slot></slot></div>
</template>
<script>
    const prefixCls = 'yy-tabs'
    export default {
        name: 'YYTabPane',
        props: {
            name: {
                type: String
            },
            label: {
                type: [String, Function],
                default: ''
            }
        },
        data () {
            return {
                prefixCls: prefixCls,
                show: true,
                currentName: this.name
            }
        },
        methods: {
            updateNav () {
                this.$parent.updateNav()
            }
        },
        watch: {
            name (val) {
                this.currentName = val
                this.updateNav()
            },
            label () {
                this.updateNav()
            }
        },
        mounted () {
            this.updateNav()
        },
        destroyed () {
            this.updateNav()
        }
    }
</script>
