export const sliderDom = {
  mounted(el, binding) {
    addEventListener(el, binding)
  },
  unmounted(el) {
    removeEventListener(el)
  }
}
function removeEventListener(el) {
  el.removeEventListener('touchstart', () => {})
  el.removeEventListener('touchmove', () => {})
  el.removeEventListener('touchend', () => {})
}

function addEventListener(el, { value }) {
  const { leftDisabled = false, rightDisabled = false, elId, handleChange } = value

  // 縱向滑動(dòng)時(shí)禁止水平滑動(dòng)侍瑟，水平滑動(dòng)時(shí)禁止縱向滑動(dòng)倔丈；
  // 水平滑動(dòng)結(jié)束超過屏幕二分之一時(shí)則toggle；
  // 最大可滑動(dòng)不超過屏幕的三分之二瓦呼；
  let startX = 0
  let startY = 0
  let endX = 0
  let endY = 0
  let dValueX = 0
  let dValueY = 0
  let horizontalMoved = false
  let verticalMoved = false
  const filterEl = e => {
    return e.target.id === elId
  }
  const onTouchStart = e => {
    if (filterEl(e)) {
      startX = e.targetTouches[0].pageX
      startY = e.targetTouches[0].pageY
    }
  }

  const onTouchMove = e => {
    if (filterEl(e)) {
      endX = e.targetTouches[0].pageX
      endY = e.targetTouches[0].pageY
      dValueX = Math.abs(startX - endX)
      dValueY = Math.abs(startY - endY)

      // 水平滑動(dòng)長(zhǎng)度大于縱向滑動(dòng)長(zhǎng)度背率，選擇水平滑動(dòng)
      if (dValueX > dValueY) {
        if (verticalMoved) {
          e.preventDefault()
          return
        } else horizontalMoved = true

        e.preventDefault()
      } else {
        if (horizontalMoved) e.preventDefault()
        else verticalMoved = true
        verticalMoved = true
      }
    }
  }

  const onTouchEnd = e => {
    if (filterEl(e)) {
      // const range = window.screen.width / 3
      const range = 100
      if (horizontalMoved) {
        if (dValueX > range) {
          if (startX > endX) {
            // console.log('向左劃')
            if (!leftDisabled) handleChange('left')
          } else if (startX < endX) {
            // console.log('向右劃')
            if (!rightDisabled) handleChange('right')
          }
        }
      }
      if (verticalMoved) {
        // 處理縱向滑動(dòng)邏輯
      }
      horizontalMoved = false
      verticalMoved = false
      startX = endX = 0
      startY = endY = 0
    }
  }
  el.addEventListener('touchstart', onTouchStart)
  el.addEventListener('touchmove', onTouchMove)
  el.addEventListener('touchend', onTouchEnd)
}