<template>
    <div :class="_classes" :style="_style"><slot></slot></div>
</template>

<script>
export default {
    name:"ctCarousle",
    props:{

    },
    data:function(){
        return {
            offset:0,
            active:this.$parent.active,
        }
    },
    computed:{
        _classes:function(){
                var _p = this.$parent;
                var active = this.active,
                    index = _p.carousel.indexOf(this),
                    length = _p.carousel.length,
                    calssName = "";
                if(index == active){
                    calssName = "is-active is-animation"
                }else if(length == 2){
                    calssName = "is-animation";
                }else if(length > 2 ){
                    if((index == active-1)||(index == active +1)){//||(active == length - 1 && index == 0)
                        calssName = "is-animation"
                    } 
                }
            return ["ct-carousel-item",calssName];
        },
        _style:function(){
                var _p = this.$parent;
                var active = this.active,
                    vertical = _p.vertical,
                    width = _p.computedWidth,
                    index = _p.carousel.indexOf(this),
                    length = _p.carousel.length,
                    width = _p.computedWidth ,
                    offset = "0",
                    zindex = "0";
                    // console.log( width,vertical )
                    if(length ==  2){
                        offset = index == active ? '0' : width+'px' ;
                        zindex = 2 ;
                    }else if (length > 2){
                        if(index ==  active){//选中
                            offset = "0"
                            zindex = 2 ;
                        }else if(active == length - 1 && index == 0){//最后一张切换
                            offset=width+'px';
                            // zindex = 2 ;
                        }else if(index == active + 1){//后一张
                            offset = width + 'px';
                            zindex = 2 ;
                        }else if (index == active - 1){//前一张
                            offset = "-" + width +'px';
                            zindex = 2 ;
                        }else {//其余
                            offset = ( active - index ) * width + 'px';
                        }
                    }
                    offset = vertical ? "translate3d(0,"+offset+",0)" : "translate3d("+offset+",0,0)";
                return [{transform:offset},{zIndex:zindex}];
                
        },
    },
    beforeCreate:function() {
        this.$parent.carousel.push(this);
    },
    destroyed: function destroyed() {
        this.$parent.carousel.splice(this.$parent.carousel.indexOf(this), 1);
    },
    watch:{
        "$parent.active":function(){
            console.log('aaa');
            this.active = this.$parent.active;
        }
    },
}
</script>

