<script>
    import TabsNav from "./tabs-nav.vue"
    export default{
        name: "v-tabs",
        data(){
            return {
                panes: [],
                currentName: this.value || this.activeName,
            }
        },
        components: {
            TabsNav
        },
        props: {
            value: {},
            activeName: String,
            width:{
                type: Number,
                default: 105
            },
            totalHeight:String,
            tabList:{
                type:Array,
                default: function () {
                    return []
                }
            },
            //tab标签名字段
            tabTitle:{
                type:String,
                default:"title"
            }
        },
        methods: {
            handleTabClick(dataBack,tabName, tab, event) {
                this.$refs.tabsContent.scrollTop=0;
                this.setCurrentName(tabName);
                this.$emit('tab-click', dataBack, tabName,tab,event);
            },
            addPanes(item){
                this.panes.push(item);
            },
            setCurrentName(value){
                this.currentName = value;
            },
        },
        render(h){
            const {
                    handleTabClick,
                    panes,
                    width,
                    totalHeight,
                    tabList,
                    tabTitle
                    }=this
            const navData = {
                props: {
                    width:width,
                    onTabClick: handleTabClick,
                    panes: panes,
                    tabList:tabList,
                    tabTitle:tabTitle
                },
                ref: 'nav'
            };
            return (
                    <div style={{height:totalHeight}}>
                        <div class="v-tabs-header">
                            <tabs-nav {...navData}  ref="tabsNav"></tabs-nav>
                        </div>
                        <div class="v-tabs-content" ref="tabsContent">
                            {this.$slots.default}
                        </div>
                    </div>
            )
        },
        created() {
            if (!this.currentName) {
                this.tabList.length>0?this.setCurrentName(this.tabList[0][this.tabTitle]):this.setCurrentName(0);
            }

        },
        updated(){
            this.$refs.tabsContent.style.height="calc(100% - "+(this.$refs.tabsNav.$el.offsetHeight+1)+"px)"
        },
        watch: {
            activeName(value) {
                this.setCurrentName(value);
            },
            value(value) {
                this.setCurrentName(value);
            },
            tabList(){
                if(this.tabList.length>0)this.setCurrentName(this.tabList[0][this.tabTitle]);
            }
        }
    }
</script>
