<template>
  <div class="banner-active">
    <div class="box">
      <ul>
        <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
          <nuxt-link :to="'/activityList/'+item.id">
            <img :src= "item.banner" style="width:100%;height: 601px" :alt="item.title"/>
          </nuxt-link>
        </li>
      </ul>
      <div class="status">
            <div class="name-t" v-for="(item, index) in list" :key="item.id">
              <div class="ft-20" v-if="index === current">{{item.title}}</div>
              <div class="ft-14" v-if="index === current">活动时间：{{item.startTime}}至{{item.endTime}}</div>
              <div class="ft-14" v-if="index === current">活动地点：{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
        </div>
      </div>
      <div class="btn">
      <span class="prev" @click="prev"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDE0NUM2RThDQUY4MTFFOUEzNDhGODgyNDA0MjU5RjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDE0NUM2RTdDQUY4MTFFOUEzNDhGODgyNDA0MjU5RjEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZWVjYjRjNTAtMzBjYS04NzRkLWJjYTktNjdjZDg5NGE3OGVhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmY5YzlkOTdkLTY5NDAtYmQ0Zi04MmMwLTYxN2RhNjkwOWRiYSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn4D1iMAAACTSURBVHjaYvz//z8DNQETA5XBqIGD0EAWKB0DxNJUMK+TEZoOFYB4DxArU2ggI8yFD4DYFoh3A7E2VGwVEN8n2UiQC5GwMBCf/A8BT4FYE02eIMYmyAvE+6GGvgZiY0oNBGFOIN4CNfQjENsRayCuZPMdiAOBeDkQcwAxG9GxQqC0YQZifSA+Ry0DR/PyABgIEGAAUjvQqbTs9sYAAAAASUVORK5CYII="/></span>
      <span class="next" @click="next"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDE0NUM2RUNDQUY4MTFFOUEzNDhGODgyNDA0MjU5RjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDE0NUM2RUJDQUY4MTFFOUEzNDhGODgyNDA0MjU5RjEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZWVjYjRjNTAtMzBjYS04NzRkLWJjYTktNjdjZDg5NGE3OGVhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmY5YzlkOTdkLTY5NDAtYmQ0Zi04MmMwLTYxN2RhNjkwOWRiYSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnB8+dsAAACHSURBVHjaYvz//z8DNQETA5XBqIH0N9APiCvxqgAlGyKxKBB/+g8B04GYGZs6UgwE4UAg/gY1dBMQc1NqIAhbAPFrqKEngVgMWZ4RmlO4gZiNhLBUBeL1QCwFxHeB2AuIbyGH4dL/lIE3QGwFMosFauNXIH5PYWpZDcTxjKOFw6iBpAOAAAMA+loYTaBJHNgAAAAASUVORK5CYII="/></span>
      </div>
    </div>
    <!--h1 @click="getArticle">{{msg}}</h1-->
  </div>
</template>

<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>

<style scoped>
  .banner-bg{
    width: 100%;
  }
  li{
    position:absolute;
    left:0;
    width:100%;
    height:auto;
    font-size:inherit;
    color:#fff;
    font-size:80px;
    text-align:center;
    opacity:0;
    transition: all 1.5s;
    list-style: none;
  }
  .active{
    opacity:1;
    transition: all 1.5s;
  }
  ul{
    height:auto;
  }
  .name-t div{
    /*font-size: 14px;*/
    color:#fff;
    padding: 0 20px;
  }
  span.active{
    color:#fff;
    background:#1bbb9f;
  }
  .status{
    position:absolute;
    bottom:20px;
    width:100%;
    display: flex;
  }
  .box{
    position:relative;
    height:100%;
  }
  span{
    display: block;
    width: 40px;
    color: #fff;
    padding: 8px 0;
    text-align: Center;
    cursor: pointer;
    background: #000;
    margin: 0 10px;
    opacity: 0.6;
  }
  span:hover{
    opacity: 0.7;
  }
  span.prev{
    float:left;
  }
  span.next{
    float:right;
  }
  .btn{
    position:absolute;
    top:50%;
    width:100%;
    transform: translateY(-50%);
  }
  .banner-active{
    width: 1030px;
    height: 601px;
    /*overflow:hidden;*/
  }
</style>
