<template>
    <div :class="classStr">
        <slot></slot>
    </div>
</template>

<script>
    import findParent from "./mixins/findParent";

    const parentName = "yTabs";
    export default {
        name: "yTabItem",
        computed:{
            classStr(){
                return "y_tabItem "
                    + (this.uiSelected ? "y_tabItem_selected " : "")
                    + (this.scroll ? "y_tabItem_scroll " : "")
                    + (this.customClass ? this.customClass : "");
            },
            uiSelected:{
                get(){
                    const parent = this._parent[parentName];
                    return parent && parent.isSelect && parent.isSelect(this.title);
                },
            }
        },
        data(){
            return {
                isTop:false,
                startY:0,
            }
        },
        methods:{
        },
        mixins: [findParent(parentName)],
        props:{
            customClass:String,
            selected:Boolean,
            scroll: Boolean,
            title:String,
        },
        created(){
            if(this._parent && this._parent[parentName]){
                const index = this._parentIndex[parentName];
                this._parent[parentName].addItem(index,this.title);
            }
        }
    }
</script>

<style lang="scss">
    .y_tabItem{
        display: none;
        text-align: left;
    }
    .y_tabItem_selected{
        display: block;
    }

    .y_tabItem_scroll{
        position: relative;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>
