/**
 *  自定义视频拖动元素
 * */

import Vue from "vue";

Vue.directive('vdrag', {
    bind: (el) => {
        // console.log(el, '---el')
        // 获取弹框标题区域dom节点
        const headerDom = el.querySelector('.room-top');
        // 修改鼠标图标样式
        headerDom.style.cursor = "move";
        // 禁止拖拽时选中标题中文本内容
        headerDom.style.userSelect = "none";

        // 获取弹框区域的dom节点
        const dialogDom = el;
        console.log(dialogDom,'---dialogDom')
        // 弹窗距离边界的距离
        const boundingPadding = 1;

        // 是否正在拖动
        let isDrag = false;

        // 鼠标按下时位置坐标
        let clientX = 0, clientY = 0;

        // 按下时弹框位置坐标
        let dialogLeft = 0, dialogTop = 0;
        let newLeft = 0, newTop = 0;
        let dialogWidth = 0, dialogHeight = 0;
        let distLeft = 0, distTop = 0;

        // 监听鼠标按下事件
        headerDom.onmousedown = function(e) {
            isDrag = true;

            // 获取当前鼠标位置坐标
            clientX = e.clientX;
            clientY = e.clientY;

            if(dialogDom.style.left == '')
            {
                // 未获取到 直接取50%
                dialogLeft = document.documentElement.clientWidth / 2;
            }
            else
            {
                // 获取当前弹窗位置坐标
                dialogLeft = parseFloat(dialogDom.style.left);
            }
            if(isNaN(dialogLeft)){
                dialogLeft = 0;
            }
            newLeft = dialogLeft;

            if(dialogDom.style.top == '')
            {
                // 未获取到 直接取50%
                dialogTop = document.documentElement.clientHeight / 2;
            }
            else
            {
                // 获取当前弹窗位置坐标
                dialogTop = parseFloat(dialogDom.style.top);
            }
            if(isNaN(dialogTop)){
                dialogTop = 0;
            }
            newTop = dialogTop;

            const dialogBounding = dialogDom.getBoundingClientRect();
            dialogWidth = dialogBounding.width;
            dialogHeight = dialogBounding.height;
            distLeft = dialogLeft - dialogBounding.left;
            distTop = dialogTop - dialogBounding.top;

            // 绑定鼠标移动事件
            document.addEventListener('mousemove', el.mousemove);
        }

        // 监听鼠标移动事件
        el.mousemove = function(e) {
            // 按下的时候，执行移动操作
            if(isDrag){
                // 设置弹窗位置以及边界处理
                newLeft = dialogLeft + e.clientX - clientX;
                // console.log(newLeft, '---newLeft')
                // console.log(distLeft, '---distLeft')
                // console.log(boundingPadding, '---boundingPadding')
                if(newLeft-distLeft<boundingPadding){
                    newLeft = boundingPadding+distLeft;
                }else if(newLeft-distLeft>window.innerWidth-boundingPadding-dialogWidth){
                    newLeft = distLeft + window.innerWidth - boundingPadding - dialogWidth;
                }
                dialogDom.style.left = newLeft + 'px';

                newTop = dialogTop + e.clientY - clientY;
                // console.log(newTop, '---newTop')
                // console.log(distTop, '---distTop')
                // console.log(boundingPadding, '---boundingPadding')
                if(newTop-distTop<=boundingPadding){
                    newTop = boundingPadding + distTop;
                }else if(newTop-distTop>=window.innerHeight-boundingPadding-dialogHeight){
                    newTop = distTop + window.innerHeight - boundingPadding - dialogHeight;
                }
                dialogDom.style.top = newTop + 'px';
            }
        }

        // 监听鼠标抬起事件
        el.mouseup = function(e) {
            isDrag = false;

            // 解绑鼠标移动事件
            document.removeEventListener('mousemove', el.mousemove);
        }

        // 绑定鼠标抬起事件
        document.addEventListener('mouseup', el.mouseup);
    },
    unbind: (el) => {
        // 解绑鼠标抬起事件
        document.removeEventListener('mouseup', el.mouseup);
    }
})