<script>
    function noop() {
    }

    export default{
        name: "tabs-nav",
        data(){
            return {
                leftIndex:0,
                left:0,
            }
        },
        props: {
            panes: Array,
            onTabClick: {
                type: Function,
                default: noop
            },
            width:{
                type: Number
            },
            tabList:Array,
            tabTitle:String
        },
        render(h){
            const {
                    panes,
                    onTabClick,
                    clickLeft,
                    left,
                    clickRight,
                    width,
                    tabList,
                    tabTitle
                    }=this;
            const tabs=tabList.length>0?
                this._l(tabList, (item, index) => {
                    return (
                            <div ref="tabs" 
                            on-click={(ev) => { onTabClick(item,item[tabTitle],{},ev); }}
                            class={{'v-tabs-nav-active': item[tabTitle] == this.$parent.currentName ? true : false}}
                            style={{width:width+"px"}}>
                                {item[tabTitle]}
                            </div>
                    );
                })
                :
                this._l(panes, (pane, index) => {
                    let tabName = pane.name || index|| pane.index;
                    const tabLabelContent = pane.$slots.label || pane.label;
                    const dataBack=pane.dataBack||{};
                    pane.index = index;
                    return (
                            <div ref="tabs" on-click={(ev) => { onTabClick(dataBack,tabName, pane,ev); }}
                                class={{'v-tabs-nav-active': pane.active}} style={{width:width+"px"}}>
                                {tabLabelContent}
                            </div>
                    );
                })

            let conWid = document.querySelector(".v-tabs-header")?document.querySelector(".v-tabs-header").offsetWidth:0;
            let show = tabList.length>0?(tabList.length*width>conWid?true:false):(panes.length*width>conWid?true:false);
            return (
                    <div class={{"v-tabs-nav":true,"v-tabs-nav__content-if":show}}>
                        <span v-show={show} on-click={(ev) => {clickLeft()}}>
                            <span class="v-tabs-nav__left"></span>
                        </span>
                        <div class="v-tabs-nav__content">
                            <div class="v-tabs-nav__slide" style={{"left":left+"px"}}>
                                {tabs}
                            </div>
                        </div>
                        <span class="v-tabs-nav__right"  v-show={show} on-click={(ev) => {clickRight()}}></span>
                    </div>
            )
        },
        methods:{
            clickLeft(){
                if(this.leftIndex<0){
                    this.leftIndex+=1;
                    this.left=this.leftIndex*this.width;
                }
            },
            clickRight(){
                if(Math.abs(this.leftIndex)<(this.tabList.length>0?(this.tabList.length-1):(this.panes.length-1))){
                    this.leftIndex-=1;
                    this.left=this.leftIndex*this.width;
                }
            }
        },
        watch:{
            tabList(){
                this.leftIndex=0;
                this.left=0;
            }
        }
    }
</script>
