Vue.component("roll-left-right-img", {
    template: `
        <div @mouseout="costMouseout"  @mouseover="costMouseover">
            <slot></slot> 
            <div class="bzh-flex">
                <div class="bzh-btn">
                    <img src="/images/carousel_left.png" @click="carouselLeft">
                </div>
                <div class="bzh-content" ref="rollImgMax" :style="{'width': number*200+'px'}">
                    <div class="bzh-content-img" v-for="item in list">
                        <el-image style="width: 180px; height: 180px"
                                  :src="item" fit="cover" :preview-src-list="list"></el-image>
                    </div>
                </div>
                <div class="bzh-btn">
                    <img src="/images/carousel_right.png" @click="carouselRight">
                </div>
            </div>
        </div>
    `,
    props: {
        list:{
            type:Array
        },
        number:{
            type:Number
        }
    },
    data() {
        return {
            costIndex:0,
            imgRollInterval:undefined,
            direction:'left'
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            // 图片轮播 定时器
            this.imgRollInterval = setInterval(this.imgRoll,5000);
        },
        carouselLeft(){
            this.direction = 'left'
            this.manufacturingCostRoll()
        },
        carouselRight(){
            this.direction = 'right'
            this.manufacturingCostRoll()
        },
        manufacturingCostRoll(){
            var width = $(".bzh-content-img").innerWidth()
            if(this.direction == 'right'){
                if(this.costIndex == this.list.length - this.number){
                    this.costIndex = 0
                }else{
                    this.costIndex = this.costIndex + 1
                }
            }else{
                if(this.costIndex == 0){
                    this.costIndex = this.list.length - this.number
                }else{
                    this.costIndex = this.costIndex - 1
                }
            }
            console.log(this.costIndex)
            $(this.$refs.rollImgMax).animate({scrollLeft:(width*this.costIndex)+'px'})
            this.direction = 'right'
        },


        imgRoll(){
            var width = $(".bzh-content-img").innerWidth()
            if(this.costIndex == this.list.length - this.number){
                this.costIndex = 0
            }else{
                this.costIndex = this.costIndex + 1
            }
            $(this.$refs.rollImgMax).animate({scrollLeft:(width*this.costIndex)+'px'})
        },
        costMouseover(){
            clearInterval(this.imgRollInterval);
        },
        costMouseout(){
            this.imgRollInterval=setInterval(this.imgRoll,5000);
        },
    },
    watch:{
        list:function (o,n) {

        }
    },

})