<template>
    <div class=''>
        <div class="type-slide u-flex">
            <div class="left-ico ico" @click="leftClick"></div>
            <div class="slides">
                <div class="item-arry u-flex" :class="{active:itemArryIndex==arryIndex}" v-for="(itemArry,itemArryIndex) in data" :key="itemArryIndex">
                    <div class="slide-item" 
                    :class="{active:index==activeItem}" 
                    v-for="(item,index) in itemArry" :key="index"
                    @click="itemClick(item,index)"
                    >{{item.text}}</div>
                </div>
            </div>
            <div class="right-ico ico" @click="rightClick"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: '',
        props:{
            data:{
                type: Array,
                default: null,
            },
        },
        components: {},
        data () {
            return {
                arryIndex:0,
                activeItem:0,
            };
        },
        watch: {
            data(v){
                // console.log('data v',v);
            },
            arryIndex(v){
                // console.log('arryIndex v',v);
                this.activeItem = 0;
            }
        },
        created(){
            
        },
        mounted(){
        },
        methods: {
            leftClick(){
                // console.log('arryIndex',this.arryIndex);
                if(this.arryIndex>0){
                    this.arryIndex-=1
                }
            },
            rightClick(){
                if(this.arryIndex+1<this.data.length){
                    this.arryIndex+=1;
                }
            },
            itemClick(item,index){
                this.activeItem = index;
                console.log('itemClick item', item);
            }
        },
    }
</script>

<style lang='scss' scoped>
.type-slide{
    margin-bottom: 2vh;
    .ico{
        cursor: pointer;
        width: 1em;
        height: 1em;
        border-top: 1px solid rgba(38,80,179,1);
    }
    .left-ico{
        border-left: 1px solid rgba(38,80,179,1);
        transform: rotate(-45deg);
    }
    .right-ico{
        border-right: 1px solid rgba(38,80,179,1);
        transform: rotate(45deg);
    }
    .slides{
        flex: 1;
        overflow: hidden;
        height: 2em;
        position: relative;
        .item-arry{
            position: absolute;
            left: 0;
            top: -200%;
            width: 100%;
            height: 100%;
            justify-content: space-between;
            transition: all 0.5s;
            .slide-item{
                cursor: pointer;
                width: 30%;
                background: rgba(38,80,179,0.7);
                padding: 8px 0;
                border-radius: 5px;
                &.active{
                    background: rgba(38,80,179,1);
                }
            }
            &.active{
                top: 0;
            }
        }
    }
}
</style>