
// 盒子滚动条拖拽
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
            }
        }
    }
})

