<template>
    <div class="ContinuPlay_box" @touchstart="TouchStart" @touchmove="TouchMove" @touchend="TouchEnd">
      <div class="items_box">
        <div v-for="(item, index) in banners" class="slide" :key="index">
          <a :href="item.link" rel="external nofollow" >
            <img :src="item.image" alt="">
          </a>
        </div>
      </div>
      <div class="points_box">
        <div class="points">
          <div class="each_point" v-for="(item, index) in banners.length" :key="index" :class="{current:index==CurrentImg}"></div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "ContinuPlay",
    props:['banners'],         //接受父級組件傳過來的banners數(shù)據(jù)
    data(){
      return{
        bannerwidth: 0,        //輪播圖寬度
        StartPoint: 0,         //觸摸開始的點的橫坐標
        EndPoint: 0,           //觸摸結(jié)束的點的橫坐標
        MoveLength: 0,         //StartPoint與EndPoint的差值
        CurrentImg: 0,         //當前輪播圖的索引
        isPlaying: true,       //判斷是否處于自動輪播
        playTimer: null        //輪播定時器
      }
    },
    methods:{
      TouchStart(event){
      	//停止輪播
        clearInterval(this.playTimer)
        //獲取觸摸的開始點
        this.StartPoint = event.changedTouches[0].pageX
      },
      TouchMove(event){
        //獲取觸摸的結(jié)束點
        this.EndPoint = event.changedTouches[0].pageX
        this.slidings()
      },
      TouchEnd(){
        this.Jump()
        //開始輪播
        this.startPlay()
      },
      //Jump()方法用于處理滑動到一定程度后松手自動跳轉(zhuǎn)到下一頁或上一頁
      Jump(){
        const currentimg = document.getElementsByClassName('slide')
        //滑動超過輪播圖寬度的百分之40，則跳轉(zhuǎn)下一張，否則不跳轉(zhuǎn)
        if(this.MoveLength > 0 && this.CurrentImg !== this.banners.length-1){
          if(this.MoveLength > this.bannerwidth * 0.4){
            this.CurrentImg ++
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          }
          else{
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          }
        }
        else if(this.MoveLength < 0 && this.CurrentImg !== 0){
          if(-this.MoveLength > this.bannerwidth * 0.4){
            this.CurrentImg --
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          }
          else{
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
          }
        }
      },
      //slidings()方法用于處理在滑動過程中，輪播圖跟著手指滑動的距離移動
      slidings(){
        //判斷是點擊還是滑動
        if(this.StartPoint === this.EndPoint){return}
        this.MoveLength = this.StartPoint - this.EndPoint
        //操作DOM，獲取輪播圖對象標簽
        const currentimg = document.getElementsByClassName('slide')
        //獲取輪播圖的寬度
        this.bannerwidth = currentimg[0].offsetWidth
        //判斷是否超出滑動范圍，即第一頁無法再往前一頁滑動，最后一頁無法再往后一頁滑動
        if(this.MoveLength > 0 && this.CurrentImg !== this.banners.length-1){
          currentimg[0].style.marginLeft = -this.MoveLength - this.CurrentImg * this.bannerwidth   + 'px'
        }
        else if(this.MoveLength < 0 && this.CurrentImg !== 0){
          currentimg[0].style.marginLeft = -this.MoveLength - this.CurrentImg * this.bannerwidth   + 'px'
        }
      },
      //開啟輪播
      startPlay() {
          clearInterval(this.playTimer)
          this.playTimer = setInterval(() => {
            if(this.CurrentImg === 3) {
              this.CurrentImg = -1
            }
            this.CurrentImg ++
            const currentimg = document.getElementsByClassName('slide')
            this.bannerwidth = currentimg[0].offsetWidth
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
            currentimg[0].style.transition = 'all 1s ease'
          }, 3000)
      }
    },
    mounted() {
    	//頁面掛在完畢自動開啟輪播
    	this.startPlay()
    }
  }
</script>

<style scoped>
  .ContinuPlay_box{
    overflow: hidden;
    position: relative;
  }
  .ContinuPlay_box .items_box{
    display: flex;
  }
  .ContinuPlay_box .slide{
    flex-shrink: 0;
    width: 100%;
  }
  .ContinuPlay_box .slide img, .ContinuPlay_box .slide a{
    width: 100%;
    height: 100%;
  }
  .points_box{
    display: flex;
    justify-content: center;
  }
  .points{
    display: flex;
    width: 33%;
    height: 10px;
    position: absolute;
    bottom: 8px;
    justify-content: space-evenly;
  }
  .points .each_point{
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #fff;
    opacity: 0.7;
  }
  .points .current{
    background: #ff0031;
  }
</style>