<template>
  <div class="banner">
    <div class="box">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="item.id"
          :class="index === current ? 'active' : ''"
          @click="bannerClick(index, item)">
          <img
            :src= "item.cover"
            :alt="item.title"
            style="height: 80px;width:auto;margin: 0 auto;">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: [
      'list',
      'looptime',
      'height',
      'width',
      'background',
      'color',
      'fontSize'
    ],
    data() {
      return {
        current: 0, // 当前索引
        timerId: null, // 清除循环标记
        intStyle: {}
      }
    },
    created () {
      this.int(4000);
    },
    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
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "../assets/styles/mixin";
  .banner-bg{
    width: 100%;
  }
  .banner li{
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    color:#fff;
    font-size:80px;
    text-align:center;
    opacity:0;
    transition: all 1.5s;
  }
  .active{
    opacity:1 !important;
    transition: all 1.5s;
  }
  .banner .name-t{
    display:inline-block;
    height:40px;
    width:100px;
    font-size: 14px;
    margin:0 5px;
    background:#ccc;
    color:#333;
    cursor:pointer;
  }
  .banner span.active{
    color:#fff;
    background:#1bbb9f;
  }
  .banner .status{
    position:absolute;
    bottom:20px;
    width:100%;
    height:40px;
    text-align:Center;
    display: flex;
    justify-content: center;
  }
  .banner .box{
    position:relative;
  }
  .banner span{
    display:block;
    height:40px;
    width:20px;
    color:#fff;
    line-height:40px;
    text-align:Center;
    background:rgba(0,0,0, .7);
    cursor:pointer;
  }
  .banner span.prev{
    float:left;
  }
  .banner span.next{
    float:right;
  }
  .banner .btn{
    position:absolute;
    top:50%;
    width:100%;
    transform: translateY(-50%);
  }
  .banner{
    height:80px;
    overflow: hidden;
    margin-top: 44px;
  }
  .banner img{
    object-fit:cover;
  }
</style>
