export default {
    name: 'ProTabs',
    props: {
        value: String,
        //使用过渡效果，默认关闭
        useTransition: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            svalue: this.value
        }
    },
    render () {
        const this_ = this
        let lazy = true
        //遍历item.componentOptions.children是返回a-tabs-pane组件中的所有组件
        //在每个children外包个div是为了写v-show,否则无动画效果
        const res = <a-tabs v-model={this.svalue} {...this_.$attrs} v-on={this_.$attrs}>
            {this.$slots.default().map(item => {
                const cO = item?.props
                if (cO && cO.lazy == false) {
                    lazy = false
                }
                return <a-tab-pane tab={cO?.label} key={cO?.name} {...item?.props}>
                    {item.children}
                </a-tab-pane>
            })}
        </a-tabs>
        return res
    },
    watch: {
        value (val, oldVal) {
            this.svalue = this.value
        },
        // 判断下拉框的值是否有改变
        svalue (val, oldVal) {
            if (val != oldVal) {
                this.$emit('input', this.svalue);
            }
        },
    }
}
