const directives = {
    'card': {
        inserted(el, binding, vnode, oldVnode) {
            el.classList.add('page-card');
            el.style.height = window.innerHeight - 125 + 'px';

            function heightHandler(e) {
                el.style.height = window.innerHeight - 125 + 'px';
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__page_card__ = heightHandler;
            window.addEventListener('resize', heightHandler);
        },
        unbind(el, binding) {
            // 解除事件监听
            window.removeEventListener('resize', el.__page_card__);
            delete el.__page_card__;
        }
    },
    'dialog-drag': { // 弹窗拖拽
        bind(el, binding, vnode, oldVnode) {
            const dialogHeaderEl = el.querySelector('.ant-modal-header');
            const dragDom = el.querySelector('.ant-modal-content');
            dialogHeaderEl.style.cursor = 'move';
    
            // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
            
            dialogHeaderEl.onmousedown = (e) => {
                // 鼠标按下，计算当前元素距离可视区的距离
                const disX = e.clientX - dialogHeaderEl.offsetLeft;
                const disY = e.clientY - dialogHeaderEl.offsetTop;
                
                // 获取到的值带px 正则匹配替换
                let styL, styT;
    
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if(sty.left.includes('%')) {
                    styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                    styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
                }else {
                    styL = +sty.left.replace(/\px/g, '');
                    styT = +sty.top.replace(/\px/g, '');
                };
                
                document.onmousemove = function (e) {
                    // 通过事件委托，计算移动的距离 
                    const l = e.clientX - disX;
                    const t = e.clientY - disY;
                    // 移动当前元素  
                    dragDom.style.left = `${l + styL}px`;
                    dragDom.style.top = `${t + styT}px`;
    
                    //将此时的位置传出去
                    //binding.value({x:e.pageX,y:e.pageY})
                };
    
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }  
        }
    },
    'clickoutside': {
        // 初始化指令
        bind(el, binding, vnode) {
            function documentHandler(e) {
                // 这里判断点击的元素是否是本身，是本身，则返回
                if (el.contains(e.target)) {
                    return false;
                }
                // 判断指令中是否绑定了函数
                if (binding.expression) {
                    // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                    binding.value(e);
                }
            }
            // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
            el.__vueClickOutside__ = documentHandler;
            document.addEventListener('click', documentHandler);
        },
        update() {},
        unbind(el, binding) {
            // 解除事件监听
            document.removeEventListener('click', el.__vueClickOutside__);
            delete el.__vueClickOutside__;
        },
    }
}

export default {
    install: function(Vue) {
        Object.keys(directives).forEach(key => {
            Vue.directive(key, directives[key]);
        })
    }
}