Vue.component("roll-img-four", {
    template: `
        <div class="exercise-photos-overflow" style="height: 388px;" ref="rollImgMax"  
        @mouseout="costMouseout"  @mouseover="costMouseover">
            <el-row>
                <el-col :span="12" v-for="item in list">
                    <div class="exercise-photos-padding">
                        <el-image style="width: 190px; height: 180px" fit="cover"
                                  :src="item" :preview-src-list="list"></el-image>
                    </div>
                </el-col>
            </el-row>
        </div>
    `,
    props: {
        list:{
            type:Array
        }
    },
    data() {
        return {
            costIndex:0,
            imgRollInterval:undefined,
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            // 图片轮播 定时器
            this.imgRollInterval = setInterval(this.imgRoll,5000);
        },
        aaaa(){
            this.imgRoll()
        },
        imgRoll(){
            var height = $(".exercise-photos-padding").innerHeight()
            if(this.costIndex == Math.ceil(this.list.length/2) - 2){
                this.costIndex = 0
            }else{
                this.costIndex = this.costIndex + 1
            }
            $(this.$refs.rollImgMax).animate({scrollTop:(height*this.costIndex)+'px'})
        },
        costMouseover(){
            clearInterval(this.imgRollInterval);
        },
        costMouseout(){
            this.imgRollInterval=setInterval(this.imgRoll,5000);
        },
    },
    watch:{

    },

})