/**
 * 顶部header
 */
Vue.component("carousel-tesedangjian", {
    template: `
        <div :style="{'height': height + 'px','width':width+'px'}" class="carousel-max" @mouseout="carouselMouseout"  @mouseover="carouselMouseover">
            <div class="carousel-min" ref="carousel" :style="{'width':(width*forData.length)+'px','left':left+'px'}">
                 <div class="carousel-for" :style="{'width':width+'px'}" v-for="(item,i) in forData">
<!--                    <img :src="item.url">-->
                       <el-image :style="{'height': height + 'px','width':width+'px'}"
                                  :src="item.url" fit="cover" :preview-src-list="dataList"></el-image>
                    <div class="carousel-text" :style="{'width':width+'px'}">{{item.text}}</div>
                </div>
            </div>
            <div>
                <div class="carousel-left" :style="{'left':arrowLeft+'px'}"    @click="clickCtrl('right')"><img src="/images/carousel_left.png"></div>
                <div class="carousel-right" :style="{'right':arrowRight+'px'}" @click="clickCtrl('left')"><img src="/images/carousel_right.png"></div>
            </div>
        </div>
        
        
    `,
    props: {
        // list:{
        //     type:Array
        // },
        height:{
            type:Number
        },
        width:{
            type:Number
        },
        data:{
            type:Array
        }
    },
    data() {
        return {
            interval:undefined,
            left:0,
            direction:'left',
            forData:[],
            arrowLeft: -30,
            arrowRight:-30,
            dataList:[]
        }
    },
    mounted(){
        this.init()

    },
    methods: {
        init(){
            this.dataList=this.data.map(item=>item.url)
            this.forData = this.data
            this.interval = setInterval(this.timer, 3000);
        },
        carouselMouseover(){
            this.arrowLeft =10
            this.arrowRight =10
            clearInterval(this.interval);
        },
        carouselMouseout(){
            this.arrowLeft = -30
            this.arrowRight =-30
            this.direction = 'left'
            this.interval=setInterval(this.timer,3000);
        },
        clickCtrl(direction){
            this.direction = direction
            this.timer()
        },
        timer(){
            if(this.direction == 'left'){
                this.left = this.left - this.width
                if(this.left == -((this.forData.length) * this.width)){
                    this.left = 0
                }
            }else{
                if(this.left == 0){
                    this.left = -((this.forData.length-1) * this.width)
                }else {
                    this.left = this.left + this.width
                }
            }
        },
    },
    watch:{
        data: function (n,o) {
            this.init()
        }
    },

})