import './drag.css';

export default {
    bind(el, { name, value }, vnode) {
        switch (name) {
            case 'drag': {
                if (['left', 'right', 'top', 'bottom'].indexOf(value) == -1) return;
                // 创建边框子元素
                const border = document.createElement('div');
                border.classList.add("pseudo-border");
                el.appendChild(border);
                // 添加拖拽样式
                addDragStyle(el, value);
                // 添加拖拽事件
                addDragEvent(el, border);
                break;
            }
        }
    },
    // inserted()
    // update()
    // componentUpdated()
    // unbind()
}

function addDragEvent(el, border, direction) {
    // border.setAttribute('draggable', true)
    const onMouseMove = function (e) {
        console.log('move', e);
    }
    const onMouseUp = function (e) {
        console.log('up')
        border.removeEventListener('mousemove', onMouseMove);
    }
    
    border.addEventListener('mousedown', function (e) {
        console.log('down');
        document.body.removeEventListener('mouseup', onMouseUp)
        document.body.addEventListener('mouseup', onMouseUp)
        border.addEventListener('mousemove', onMouseMove);
    });

    // TODO: 有点bug

    // el.addEventListener('mousedown', function (e) {
    //     console.log('mousedown', e);
    //     const { clientX, clientY } = e;
    //     const { left, top, width, height } = el.getBoundingClientRect();
    //     const { offsetLeft, offsetTop } = el;
    //     const startX = clientX;
    //     const startY = clientY;
    //     const startLeft = left;
    //     const startTop = top;
    //     const startWidth = width;
    //     const startHeight = height;
    //     const startOffsetLeft = offsetLeft;
    //     const startOffsetTop = offsetTop;
    //     const move = function (e) {
    //         console.log('mousemove', e);
    //         const { clientX, clientY } = e;
    //         const offsetX = clientX - startX;
    //         const offsetY = clientY - startY;
    //         switch (direction) {
    //             case 'left': {
    //                 el.style.left = startLeft + offsetX + 'px';
    //                 el.style.width = startWidth - offsetX + 'px';
    //                 break;
    //             }
    //             case 'right': {
    //                 el.style.width = startWidth + offsetX + 'px';
    //                 break;
    //             }
    //             case 'top': {
    //                 el.style.top = startTop + offsetY + 'px';
    //                 el.style.height = startHeight - offsetY + 'px';
    //                 break;
    //             }
    //             case 'bottom': {
    //                 el.style.height = startHeight + offsetY + 'px';
    //                 break;
    //             }
    //         }
    //     }
    //     const up = function (e) {
    //         console.log('mouseup', e);
    //         document.removeEventListener('mousemove', move);
    //         document.removeEventListener('mouseup', up);
    //     }
    //     document.addEventListener('mousemove', move);
    //     document.addEventListener('mouseup', up);
    // });
}

function addDragStyle(el, direction) {
    el.classList.add('v-drag-border-' + direction)
}