<template>
  <ul class="sv-full-page">
    <slot></slot>
  </ul>
</template>

<script type="es6">
  import '../../scripts/calcHtmlFontSize.js'
  export default {
    name: 'svFullPage',
    data () {
      return {
        slideImages: [0, 1, 2, 3, 4, 5],
        validateMessage: '',
        slideItemIndex: 0,
        touchDirection: 'up',
        touchStartTime: 0,
        touchDuration: 0,
        threshold: 80 // 切换到下一页的阀值
      }
    },
    methods: {
      translateY (translateY) {
        let $slideBox = document.querySelector('.sv-full-page')
        $slideBox.style.transform = `translateY(${translateY - this.slideItemIndex * 2}px)`
      }
    },
    mounted () {
      let $slideBox = document.querySelector('.sv-full-page')
      let windowHeight = document.body.clientHeight
      let startY, currentY, endY, moveDistance

      $slideBox.addEventListener('touchstart', (event) => {
        $slideBox.style.transition = `transform 0s`
        let touch = event.targetTouches[0]
        startY = touch.pageY
        this.touchStartTime = new Date().getTime()
      })

      $slideBox.addEventListener('touchmove', (event) => {
        event.preventDefault()
        let touch = event.targetTouches[0]

        currentY = touch.pageY
        moveDistance = currentY - startY

        this.translateY(-this.slideItemIndex * windowHeight + moveDistance)
      })

      $slideBox.addEventListener('touchend', (event) => {
        this.touchDuration = new Date().getTime() - this.touchStartTime

        if (this.touchDuration < 300 && Math.abs(moveDistance) < 3) { // 点击事件
          return
        }

        let touch = event.changedTouches[0]
        let targetHeight = $slideBox.childNodes[this.slideItemIndex].offsetHeight
        endY = touch.pageY

        this.moveDirection = endY - startY < 0 ? 'up' : 'down'
        moveDistance = endY - startY

        $slideBox.style.transition = `transform .2s ease-in-out`

        if (this.moveDirection === 'up') {
          if (Math.abs(moveDistance) < this.threshold) { // 滑动距离小于阀值，则停留在当前页
            this.translateY(-this.slideItemIndex * windowHeight)
          } else {
            // 滑动到最后一张时，继续向上滑动，总是停留在最后一张
            if (this.slideItemIndex < document.querySelectorAll('.sv-slide-item').length - 1) {
              this.slideItemIndex ++
            }

            this.translateY(-this.slideItemIndex * windowHeight)
          }
        } else { // 向下滑动
          if (Math.abs(moveDistance) < this.threshold) { // 滑动距离小于阀值，则停留在当前页
            this.translateY(-this.slideItemIndex * windowHeight)
          } else {
            // 滑动到第一张时，继续向下滑动，则停留在第一张
            if (this.slideItemIndex > 0) {
              this.slideItemIndex --
            }
            this.translateY(-this.slideItemIndex * windowHeight)
          }
        }
      })
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-full-page{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    .sv-slide-item{
      width: 100%;
      height: 100%;
    }
  }
</style>
