Vue.component('security-check-drill', {
    template:`
        <div class="drill-list-max" ref="max" @mouseover="mouseEnter" @mouseout="mouseLeave">
            <div class="month-list-for" ref="min" v-for="(item,i) in data">
                <div class="drill-list-min">
                    <div class="xhz-work-order-title" @click="onWorkOrderTitle(item)">
                        <div class="xhz-order-number" v-cloak>{{item.number<10?'0'+item.number:item.number}}</div>
                        <div class="xhz-job-number" v-cloak>{{item.content}}</div>
                    </div>
                    <div class="inspect-content">
                        <div class="inspect-content-img">
                          <el-image style="width: 60px; height: 60px" :src="item.front_images.length==0?'http://fileimg.makalu.cc/WEB_E13DDB690FA14E48A306BE0286D10B48.jpg':item.front_images[0]" fit="fill"
                                      :preview-src-list="srcList" @click="imagesAmplify(item.front_images)"></el-image>
                        </div>
                        <div class="inspect-content-info">
                            
                            <div>参与人数：<span class="classify-data-2" v-cloak>{{ item.people_number_all==0?((item.project_id == 132)? item.people_number:item.people_number_all) : item.people_number_all}}</span> 人</div>
                            <div>培训时间：<span v-cloak>{{item.inspect_time}}</span></div>
                        </div>
                    </div>
                    <div class="drill-list-partnership">协作队伍：<span v-cloak>{{item.partnership}}</span></div>
                </div>
            </div>
        </div>
    `,
    props: {
        data:{
            type:Array
        }
    },
    data() {
        return {
            srcList:[],
            index:0,
            interval:'',
        };
    },
    mounted(){
        this.init()
    },
    created() {

    },
    methods: {
        init(){
            if(this.data.length > 3){
                this.interval = setInterval(this.scrollRoll, 5000);
            }
        },
        imagesAmplify(arr){
            this.srcList = arr
        },
        scrollRoll(){
            var height = this.$refs.min[0].clientHeight;
            if(this.index ==  this.data.length - 3){
                this.$refs.max.scrollTop = 0
                this.index = 1
            }else{
                this.index+=1
            }
            $(this.$refs.max).animate({scrollTop:(height * this.index)+'px'})
        },
        mouseEnter() {//鼠标移入停止滚动
            clearInterval(this.interval);
        },
        mouseLeave() {//鼠标离开继续滚动
            if(this.data.length > 3) {
                this.interval = setInterval(this.scrollRoll, 5000);
            }
        },
        onWorkOrderTitle(e){
            this.$emit('item',e);
        }
    },
    watch:{
        data:function () {
            this.init()
        }
    }
})