<template>
  <div class="banner-active">
    <div class="box">
      <ul v-if="current==0">
        <li v-for="(item, index) in list" :key="item.id" @click="bannerClickActivity(index, item)" style="cursor: pointer;" class="ac-shadow">
          <img v-if="index==0" class="shadow-00" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==0" class="bn-01" :class="index === current ? 'active' : ''" :src= "item.banner" style="width:100%;height: 554px" :alt="item.alt"/>
          <img v-if="index==1" class="shadow-01" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==1" class="bn-01" :class="index === current+1 ? 'active1' : ''" :src= "item.banner" style="width:759px;height: 443px;left:284px;top:55px;" :alt="item.alt"/>
          <img v-if="index==2" class="shadow-02" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==2" class="bn-01" :class="index === current+1 ? 'active2' : ''" :src= "item.banner" style="width:607px;height: 354px;left: 512px;top: 100px;" :alt="item.alt"/>
        </li>
      </ul>
      <ul  v-if="current==1">
        <li v-for="(item, index) in list" :key="item.id" @click="bannerClickActivity(index, item)" style="cursor: pointer;" class="ac-shadow">
          <img v-if="index==1" class="shadow-00" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==1" class="bn-01" :class="index === current ? 'active' : ''" :src= "item.banner" style="width:100%;height: 554px" :alt="item.alt"/>
          <img v-if="index==2" class="shadow-01" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==2" class="bn-01" :class="index === current+1 ? 'active1' : ''" :src= "item.banner" style="width:759px;height: 443px;left:284px;top:55px;" :alt="item.alt"/>
          <img v-if="index==0" class="shadow-02" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==0" class="bn-01" :class="index === current+1 ? 'active2' : ''" :src= "item.banner" style="width:607px;height: 354px;left: 512px;top: 100px;" :alt="item.alt"/>
        </li>
      </ul>
      <ul  v-if="current==2">
        <li v-for="(item, index) in list" :key="item.id" @click="bannerClickActivity(index, item)" style="cursor: pointer;" class="ac-shadow">
          <img v-if="index==2" class="shadow-00" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==2" class="bn-01" :class="index === current ? 'active' : ''" :src= "item.banner" style="width:100%;height: 554px" :alt="item.alt"/>
          <img v-if="index==0" class="shadow-01" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==0" class="bn-01" :class="index === current+1 ? 'active1' : ''" :src= "item.banner" style="width:759px;height: 443px;left:284px;top:55px;z-index: 3" :alt="item.alt"/>
          <img v-if="index==1" class="shadow-02" src="https://mgmt.dfangche.com/xxfccn/image/home/background05.png"/>
          <img v-if="index==1" class="bn-01" :class="index === current+1 ? 'active2' : ''" :src= "item.banner" style="width:607px;height: 354px;left: 512px;top: 100px;z-index: 2" :alt="item.alt"/>
        </li>
      </ul>
      <div class="status" v-for="(item, index) in list" :key="item.id"  @click="bannerClickActivity(index, item)">
        <!--<nuxt-link :to="'/activityList/'+item.id"  class="name-t">-->
        <a href="javascript:void(0);">
          <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>
        </a>
        <!--</nuxt-link>-->

      </div>
      <div class="btn">
      <span class="prev" @click="prev"><img src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"/></span>
      <span class="next" @click="next"><img src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/></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内容
      bannerClickActivity (index, item) {
        this.$router.push({
          path: '/activityList/'+ this.list[this.current].id,
        })
      },
      // 点击上一张按钮
      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%;
  }
  .shadow-00{
    width: 1099px;
    left: -43px;
    height: 675px;
    top: -40px;
    position: absolute;
  }
  .shadow-01{
    left: 146px;
    width: 993px;
    height: 540px;
    top: 23px;
    position: absolute;
  }
  .shadow-02{
    left: 222px;
    height: 427px;
    top: 77px;
    width: 993px;
    position: absolute;
  }
  .bn-01{
    width: 100%;
    height: 554px;
    top: 0;
    left: 0px;
    position: absolute;
  }
  li{
    position:absolute;
    left:0;
    width:100%;
    height:auto;
    font-size:inherit;
    color:#fff;
    font-size:80px;
    text-align:center;
    /*transition: all 1.5s;*/
    list-style: none;
  }
  .active{
    /*transition: all 1.5s;*/
    z-index: 9;
  }
  .active1{
    z-index: 8;
  }
  .active2{
    z-index: 7;
  }
  ul{
    height:auto;
  }
  .name-t div{
    /*font-size: 14px;*/
    color:#fff;
    padding: 0 20px;
  }
  .status{
    position:absolute;
    bottom:20px;
    width:100%;
    display: flex;
    z-index: 11;
    padding-left: 20px;
  }
  .status a{
    color: #fff;
  }
  .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%;
    z-index: 10;
    transform: translateY(-50%);
  }
  .banner-active{
    width: 948px;
    height: 554px;
    /*overflow:hidden;*/
  }
</style>
