<template>
  <div class="banner banner-vehicle-ccc">
    <div class="box">
      <ul>
        <li v-for="(item, index) in list" class="ve-bn-li" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
          <img :src= "item.cover" style="width:100%;min-width: 1120px;height: 240px;object-fit: cover;" :alt="item.alt"/>
        </li>
      </ul>
    </div>
  </div>
</template>
<style>
  @import "../assets/vehicleBanner.css";
</style>
<script>
  export default {
    name: 'banner',
    data() {
      return {
        current: 0, // 当前索引
        timerId: null, // 清除循环标记
        intStyle: {}
      }
    },
    props: [
      'list',
      'looptime',
      'height',
      'width',
      'background',
      'color',
      'fontSize'
    ],
    methods: {
      getArticle () {
        this.$emit('getArticle', this.article)
      },
      // 鼠标移入状态圆点
      changeBanner (index) {
        this.$emit('change', this.current);
        this.stopLoop();
        this.current = index;
      },
      // 鼠标点击banner内容
      bannerClick (index, item) {
        this.$emit('click', index, item);
      },
      // 点击上一张按钮
      prev () {
        if(this.current > 0) {
          // 将对象列表对应的索引和整个对象传出去
          this.$emit('prev', this.current, this.list);
          this.current--;
        } else {
          this.$emit('prev', this.current, this.list);
          this.current = this.list.length - 1 ;
        }
      },
      // 点击下一张按钮
      next () {
        if(this.current < this.list.length - 1) {
          this.$emit('prev', this.current, this.list);
          this.current ++;
        } else {
          this.$emit('prev', this.current, this.list);
          this.current = 0;
        }
      },
      // 鼠标移出继续循环播放
      startLoop () {
        this.int(4000);
      },
      // 鼠标移入停止循环播放
      stopLoop () {
        clearTimeout(this.timerId); // 清除循环
      },
      // 初始化加载
      int (time){
        this.timerId = setInterval(()=> {
          this.next();
        }, time);
        // 初始化样式
        this.intStyle = {
          width: this.width + 'px',
          height: this.height + 'px',
          background: this.background,
          color: this.color
        }
      }
    },
    created () {
      this.int(4000);
    }
  }
</script>


