<template>
    <div class="ct-carousel-group" :height="height" :width="width">
        <div class="ct-carousel-container">
            <div class="ct-carousel__inner"><slot></slot></div>
            <div :class="_arrowLeftClasses" @click="TouchPre"><i class="iconfont icon-jiantou-zuo"></i></div>
            <div :class="_arrowRightClasses" @click="TouchNext"><i class="iconfont icon-jiantou-you"></i></div>
            <div class="ct-carousel-indicators" v-if="!hideIndicators">
                <div class="ct-carousel-indicator">
                    <i :class="_indicatorClasses" v-for="item in carousel.length" :key="item">{{item}}</i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"ctCarousel",
    props:{
        height: {type: [Number,String],default: 300},
        width:{type:Number},//宽度
        autoPlay:{type:[Number,String],default:3000},//自动循环时间
        vertical:{type:Boolean,default:false},//垂直方向
        hideIndicators:{type:Boolean,default:false},//指示器显隐
        initial:{type:Number,default:0},//初始默认索引
    },
    data(){
        return {
            carousel:[],
            count:0,
            computedWidth:0,
            computedHeight:0,
            state:false,
            active:0,
            timer: null,
        }
    },
    computed:{
        _arrowLeftClasses:function() {
            return ['ct-carousel-arrow','ct-carousel-arrow__left',{'is-vertical':this.vertical}];
        },
        _arrowRightClasses:function(){
            return ['ct-carousel-arrow','ct-carousel-arrow__right',{'is-vertical':this.vertical}];
        },
        _indicatorClasses:function(){
            return ["ct-carousel-indicator__item"];
        },
        
    },
    methods:{
        _autoPlay:function(active){
            let _this = this;
            let autoPlay = _this.autoPlay;
            if(autoPlay && _this.carousel.length > 0 ){
                window.clearTimeout(this.timer);
                this.timer = window.setTimeout(()=>{
                    if(active){
                        this.active = active;
                    }else if(this.active == this.carousel.length - 1){
                        this.active = 0
                    }else {
                        this.active++;
                    };
                    // console.log(_this.active)
                    _this._autoPlay();
                },active?0:this.autoPlay);
            }
        },
        Size:function(){
                if (this.$el) {
                    var rect = this.$el.getBoundingClientRect();
                    this.computedWidth =    rect.width;
                    this.computedHeight =  rect.height;
                    // console.log(this.computedWidth,this.computedHeight);
                } 
        },
        TouchPre:function(){
            clearTimeout(this.timer);
            (this.active != 0 && this.active --) || ( this.active = this.carousel.length - 1 );
            // let active = this.active == 0 ? this.carousel.length - 1  : this.active--;
            // console.log(this.active,active,'aaaaaaaaaaaaaa');
            // this.active = active;
            // this.active = active;
            // this.active = 0 ;
            // this.active =  ;
            // this._autoPlay(active)
            // this.active = 1;
            
        },
        TouchNext:function(){
            clearTimeout(this.timer);
            console.log(this.active,"-----------");
            if(this.active == this.carousel.length - 1){this.active =0;}else{this.active++};
        },
    },
    beforemount:function() {
        this.active = this.initial;
    },
    mounted:function(){
        this.Size();
        this._autoPlay();
    },
}
</script>

