/**
 * 顶部header
 */
Vue.component("swiper-jiaoyu", {
    template: `
      <div>
      <!--                                头部展示-->
                                <div class="guocheng">
                                    <div class="glr-title">过程展示(15)</div>
                                </div>
                                <!--                                线条展示-->
                                <div class="line-drop">
                                    <div class="drop">
                                        <div class="cricle"></div>
                                        <div class="cricle"></div>
                                        <div class="cricle"></div>
                                    </div>
                                    <div class="line"></div>
                                </div>
                                <!--                                轮播图展示-->
                                <div class="lunbo" @mouseout="costMouseout" @mouseover="costMouseover">
                                    <div class="insiderBox" ref="modifyContent" style="overflow: hidden">
                                        <ul class="bigBox" ref="width">
                                            <li class="smallBox" v-for="(item,index) in imglist" :key="index">
                                                <img :src="item" alt="" style="width: 100%;height: 100%">
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="circleStyle" ref="circle">
                                        <div :class=" CircleIndex == index ? 'active circleBox':'circleBox'"
                                             v-for="(item,index) in (imglist.length - 1)" :key="index"></div>
                                    </div>
                                </div>
</div>
    `,
    props: {
        imglist: {
            type: Array,

        }
    },
    data() {
        return {
            CircleIndex: 0,
            costIndex: 0,
            direction: 'right',
            costInterval: undefined,
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        //初始化
        init() {
            // 图片定时器
            this.costInterval = setInterval(this.manufacturingCostRoll, 2000);
            this.$nextTick(() => {
                var width = $(".smallBox").innerWidth() + 76
                const a = $(this.$refs['width']).width = width * this.imglist.length
                console.log(a)
            })
        },

        manufacturingCostRoll() {
            var width = $(".smallBox").innerWidth() + 76
            if (this.direction == 'right') {
                if (this.costIndex == this.imglist.length-2) {
                    this.costIndex = 0

                } else {
                    this.costIndex = this.costIndex + 1

                }
            } else {
                if (this.costIndex == 0) {
                    this.costIndex = this.imglist.length-2

                } else {
                    this.costIndex = this.costIndex - 1
                }
            }
            this.CircleIndex = this.costIndex
            $(this.$refs.modifyContent).animate({scrollLeft: (width * this.costIndex) + 'px'})
            this.direction = 'right'
            // console.log(123)
        }
        ,
        costMouseover() {
            clearInterval(this.costInterval);
        }
        ,
        costMouseout() {
            this.costInterval = setInterval(this.manufacturingCostRoll, 2000);
        }
    },

})