<style>
  .my_carousel{
    width: 100%;
    height: calc(100vh);
    position: relative;
    left: 0;
    top: 0;
  }
  .my_carousel_item{
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100vh);
    width: 100%;
    opacity: 0;
    transition: all linear .5s;
  }
  .my_carousel_item .img{
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-position: 50%;
    background-size: cover;
  }
  .my_carousel_item_show{
    opacity: 1;
  }
  .my_carousel_content{
    position: absolute;
    left: 100px;
    bottom: 20px;
    color: white;
    padding: 20px 50px;
    background-color: rgba(0, 0, 0, .5);
  }
  .my_carousel_item_show .my_carousel_content{
    bottom: 40px;
    transition: all linear .5s;
  }
  .my_carousel_content_sline{
    height: 1px;
    width: 35px;
    display: block;
    background-color: white;
  }
  .my_carousel_content_bt_line_box{
    position: absolute;
    left: 100px;
    bottom: 20px;
  }
  .my_carousel_content_bt_line{
    display: flex;
    align-items: center;
    position: relative;
  }
  .my_carousel_content_bt_line div{
    width: 60px;
    height: 2px;
    background-color: #cecece;
    margin-right: 40px;
    position: relative;
  }
  .my_carousel_content_bt_line div span{
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 0;
    background-color: #ee4454;
  }
  .my_carousel_content_bt_line div span.my_carousel_content_bt_line_show{
    width: 60px;
  }
  .my_carousel_content h3{
    font-weight: initial;
    font-family: 'PingFangR'
  }
  .goProduct{
    cursor: pointer;
  }
</style>
<template>
  <div class="my_carousel">
    <div v-for="(item, index) in imgList" :key="index" class="my_carousel_item" :class="{my_carousel_item_show: index === show}" @mouseenter="clearAutoPlay(1)" @mouseleave="clearAutoPlay(2)">
      <div class="img" :style="`background-image: url(${item.src})`"></div>
      <div class="my_carousel_content">
        <div @click="goProduct(item.url)" class="goProduct">
          <h3>{{item.text}}</h3>
          <span class="my_carousel_content_sline"></span>
          <h3>{{item.text1}}</h3>
        </div>
      </div>
    </div>
    <div class="my_carousel_content_bt_line_box">
      <div class="my_carousel_content_bt_line">
        <div v-for="(item, index) in imgList" :key="index">
          <span :class="{my_carousel_content_bt_line_show: index === show}" :style="{'transition': index === show ? 'all linear '+ speed/1000 +'s' : ''}"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    speed: {
      type: Number,
      default: 2000
    },
    imgList: {
      type: Array,
      default: []
    },
  },
  data(){
    return{
      show: 0,
      autoPlay: null,
    }
  },methods:{
    goProduct: function(url){
      window.open(url, "_blank");
    },
    // 鼠标移入清除 创建定时器
    clearAutoPlay: function(t) {
      let _this = this;
      if (t === 1) {
        clearInterval(_this.autoPlay)
        _this.autoPlay = null
      } else {
        _this.autoPlay = setInterval(()=>{
          _this.setShow()
        }, _this.speed)
      }
    },
    // 切换
    setShow: function (){
      if (this.show === 2) {
        this.show = 0
      } else {
        this.show = this.show + 1
      }
    }
  },mounted(){
    let _this = this;
    this.autoPlay = setInterval(()=>{
      _this.setShow()
    }, _this.speed)
  },created(){
    
  },
  beforeDestroy() {
    let _this = this;
    clearInterval(_this.autoPlay);
    _this.autoPlay = null;
  }
}
</script>