/**
 * 顶部header
 */
Vue.component("swiper-row", {
    template: `
        <div>
           <div>
            <div class="sjk-chart-line-title">
                <slot></slot>
                <!--                            <div :class="btnNav==4?'active':''" @click="onClickPoint(4)">风速</div>-->
                <!--                            <div :class="btnNav==5?'active':''" @click="onClickPoint(5)">温度</div>-->
                <!--                            <div :class="btnNav==6?'active':''" @click="onClickPoint(6)">湿度</div>-->
            </div>
            <!--                        <environment-line-chart :height="220" :data="exceedanceTimesData"></environment-line-chart>-->
            <div class="OutBox" @mouseout="costMouseout" @mouseover="costMouseover">
                <!-- 左边按钮-->
                <div class="btnLeft" @click="btnLeft">
                    <img src="/images/carousel_left.png"
                         style="width: 100%;height: 100%;background-color:#040d33;">
                </div>
                <div class="outBigBox" ref="modifyContent">
                    <ul class="ulBigBox" ref="width">
                        <li class="liSmallBox" v-for="(item,index) in srcList" :key="index">
                            <div class="demo-image__preview">
                                <el-image
                                        class="ImgBox"
                                        :src="item"
                                        :preview-src-list="srcList">
                                </el-image>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--                            右边按钮-->
                <div class="btnRight" @click="btnRight">
                    <img src="/images/carousel_right.png"
                         style="width: 100%;height: 100%;background-color:#040d33;">
                </div>
            </div>
</div>
        </div>
        
    `,
    props: {
        srcList: {
            type: Array,

        }
    },
    data() {
        return {
            btnNav: 1,
            //造价
            costIndex: 0,
            direction: 'right',
            costInterval: undefined,
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        //初始化
        init() {
            // 图片定时器
            // 造价 定时器
            this.costInterval = setInterval(this.manufacturingCostRoll, 2000);

            this.$nextTick(() => {
                var width = $(".liSmallBox").innerWidth() + 28
                const a = $(this.$refs['width']).width = width * this.srcList.length
                console.log(a)
            })
        },

        btnLeft() {
            this.direction = 'left'
            this.manufacturingCostRoll()
        },
        btnRight() {
            this.direction = 'right'
            this.manufacturingCostRoll()
        },
        manufacturingCostRoll() {
            var width = $(".liSmallBox").innerWidth() + 28
            if (this.direction == 'right') {
                if (this.costIndex == 7) {
                    this.costIndex = 0
                } else {
                    this.costIndex = this.costIndex + 1
                }
            } else {
                if (this.costIndex == 0) {
                    this.costIndex = 7
                } else {
                    this.costIndex = this.costIndex - 1
                }
            }
            $(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);
        },
        onClickPoint(n) {
            this.btnNav = n;
        },
    },

})