<template>
    <div :class="$style.slideOver">
        <ul :class="$style.header">
            <Touch
                v-for="(item,index) of tabs"
                :key="index"
                tag="li"
                @tap="changeTab(index,item.value)"
                :class="[currentIndex==index&&$style.active]"
            >
                {{item.text}}
            </Touch>
        </ul>
        <slot/>
        <div
            v-for="(item,index) of num"
            v-if="currentIndex==index"
        >
            <slot :name="item"/>
        </div>
    </div>
</template>

<script>
    import Touch from "../external/Touch";

    export default {
        name: "SlideOver",
        components: {Touch},
        props: {
            initValue: {},
            tabs: {
                type: Array
            },
            num: {
                type: Array
            }
        },
        data() {
            if(typeof this.initValue!=='undefined'){
                for(let index in this.tabs){
                    if(this.tabs[index].value===this.initValue){
                        return {
                            currentIndex:index
                        }
                    }
                }
            }
            return {
                currentIndex: 0,
            }
        },
        methods: {
            changeTab(newIndex,newValue){
                this.currentIndex=newIndex;
                this.$emit('changeTab',newValue)
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';
    @value Primary from '../../cssInjection/stylization.scss';

    .slideOver {
        position: relative;
        width: 100%;
        height: 100%;
        >.header {
            display: block;
            overflow-y: hidden;
            overflow-x: visible;
            position: relative;
            z-index: 2;
            width: 100%;
            height: 40px;
            &:before{
                @include BoxShadow();
                content: '';
                position: absolute;
                left: 0;
                bottom: -100%;
                width: 100%;
                height: 100%;
            }
            > li {
                font-size: 14px;
                padding: 0 20px;
                height: 100%;
                line-height: 40px;
                text-align: center;
                display: inline-block;
                background-color: #FFF;
                opacity: 0.5;
                color: #000;
                z-index: 0;
                &.active{
                    color: Primary;
                    opacity: 1;
                    position: relative;
                    z-index: 2;
                    @include BoxShadow();
                }
            }
        }

    }
</style>
