// 支持上下左右四边拖动。若内部元素太贴边，不易触发拖动事件，最好在拖动一边加边框，使鼠标容易选中。
// 使用方式：
// <div v-resizable="'right, bottom'">
export default {
    install: (app) => {
        const sideArr = ['right', 'left', 'top', 'bottom']
        const errmsg = 'resizable needs string value of: ' + sideArr
        const minSize = 40
        const dragSize = 5

        app.directive('resizable', {
            mounted(el, binding, vnode, oldVnode) {
                const dragable = {}
                const oriCur = el.style.cursor
                const sides = binding.value.replace(' ', '').split(',')
                let dragSide = ''
                let dragging = false

                if (sides.length === 0) {
                    throw errmsg
                }
                for (let i = 0; i < sides.length; i++) {
                    if (sideArr.indexOf(sides[i]) < 0) {
                        throw errmsg
                    }
                    dragable[sides[i]] = true
                }

                el.addEventListener('mousemove', (e) => {
                    if (dragging) return

                    if (dragable['right'] && el.offsetWidth - e.offsetX < dragSize) {
                        el.style.cursor = 'ew-resize'
                        dragSide = 'right'
                    }
                    else if (dragable['left'] && e.offsetX < dragSize) {
                        el.style.cursor = 'ew-resize'
                        dragSide = 'left'
                    }
                    else if (dragable['top'] && e.offsetY < dragSize) {
                        el.style.cursor = 'ns-resize'
                        dragSide = 'top'
                    }
                    else if (dragable['bottom'] && el.offsetHeight - e.offsetY < dragSize) {
                        el.style.cursor = 'ns-resize'
                        dragSide = 'bottom'
                    }
                    else {
                        el.style.cursor = oriCur
                        dragSide = ''
                    }
                })

                el.addEventListener('mousedown', (e) => {
                    if (!dragSide) return
                    window.dragging = true
                    dragging = true
                    const cstyle = window.getComputedStyle(el)
                    const width = Number.parseInt(cstyle.width)
                    const height = Number.parseInt(cstyle.height)
                    const elW = width > 0 ? width : el.offsetWidth
                    const elH = height > 0 ? height : el.offsetHeight
                    const clientX = e.clientX
                    const clientY = e.clientY

                    const movefun = (e) => {
                        e.preventDefault()
                        if (dragSide === 'right' && (e.clientX > clientX || el.offsetWidth >= minSize)) {
                            el.style.width = elW + (e.clientX - clientX) + 'px'
                        }
                        else if (dragSide === 'left' && (e.clientX < clientX || el.offsetWidth >= minSize)) {
                            el.style.width = elW + (clientX - e.clientX) + 'px'
                        }
                        else if (dragSide === 'top' && (e.clientY < clientY || el.offsetHeight >= minSize)) {
                            el.style.height = elH + (clientY - e.clientY) + 'px'
                        }
                        else if (dragSide === 'bottom' && (e.clientY > clientY || el.offsetHeight >= minSize)) {
                            el.style.height = elH + (e.clientY - clientY) + 'px'
                        }
                    }
                    const removefun = () => {
                        dragging = false
                        window.dragging = false
                        document.removeEventListener('mousemove', movefun)
                        document.removeEventListener('mouseup', removefun)

                    }

                    document.addEventListener('mousemove', movefun)
                    document.addEventListener('mouseup', removefun)
                })
            }
        })
    }
}