// 盒子滚动条拖拽
import { on, off } from '@/utils/dom'
import Vue from 'vue'
import { debounce } from 'throttle-debounce'

let targetDrag = { // 托拽
  isDown: false,
  coord: {
    x: 0,
    y: 0
  }
}

let dom = null
let ignoreClass = [] // 忽略的类名

const scrollMousedown = event => {
  dom.style.cursor = 'pointer'
  targetDrag.isDown = true
  targetDrag.coord.x = event.pageX
  targetDrag.coord.y = event.pageY
}

const scrollMouseup = event => {
  dom.style.cursor = 'default'
  targetDrag.isDown = false
  targetDrag.coord.x = 0
  targetDrag.coord.y = 0
}

const scrollMousemove = event => {
  const movX = targetDrag.coord.x - event.pageX
  targetDrag.coord.x = event.pageX
  if (checkDomIsIgnore(event)) {
    dom.style.cursor = 'default'
    targetDrag.isDown = false
  } else if (targetDrag.isDown) {
    dom.scrollLeft = dom.scrollLeft + movX
  }
}

const scrollMouseout = event => {
  dom.style.cursor = 'default'
  targetDrag.isDown = false
}

const scrollMousewheel = event => {
  if (checkIsIgnore(event)) {
    dom.style.cursor = 'default'
    targetDrag.isDown = false
  } else {
    dom.scrollLeft += event.deltaY
  }
}

/**
 * 检查dom是否忽略
 * @param {*} e
 */
const checkDomIsIgnore = debounce(300, (e) => {
  let ignore = false
  ignoreClass.forEach(element => {
    var items = document.getElementsByClassName(element)
    if (items && !ignore) {
      for (let index = 0; index < items.length; index++) {
        const element = items[index]
        if (element.contains(e.target)) {
          ignore = true
          break
        }
      }
    }
  })
  return ignore
})

/**
 * 忽略滚轮
 * @param {*} e
 */
const checkIsIgnore = (e) => {
  let ignore = false
  ignoreClass.forEach(element => {
    var items = document.getElementsByClassName(element)
    if (items && !ignore) {
      for (let index = 0; index < items.length; index++) {
        const element = items[index]
        const rect = element.getBoundingClientRect()
        if ((e.clientY > rect.top && (e.clientY < (rect.top + rect.height))) && (e.clientX > rect.left && (e.clientX < (rect.left + rect.width)))) {
          ignore = true
          break
        }
      }
    }
  })
  return ignore
}

export default Vue.directive('scrollx', {
  bind: function (el, binding, vnode) {
    const valueData = binding.value
    ignoreClass = valueData.ignoreClass
  },

  inserted: function (el) {
    dom = el

    // 鼠标按下
    on(el, 'mousedown', scrollMousedown)
    on(el, 'mouseout', scrollMouseout)
    on(el, 'wheel', scrollMousewheel)
    // 鼠标释放
    on(el, 'mouseup', scrollMouseup)
    // 鼠标托拽
    on(el, 'mousemove', scrollMousemove)
  },

  unbind: function (el) {
    off(el, 'mousedown', scrollMousedown)
    off(el, 'mouseup', scrollMouseup)
    off(el, 'mouseout', scrollMouseout)
    off(el, 'wheel', scrollMousewheel)
    off(el, 'mousemove', scrollMousemove)

    // 清空
    targetDrag = { // 托拽
      isDown: false,
      coord: {
        x: 0,
        y: 0
      }
    }
  }
})