import Vue from 'vue'
//图片裁剪vue指令
Vue.directive('load', function(el, binding) {
    let imgDom = document.createElement('img')
    imgDom.style.position = 'absolute'
    imgDom.style.top = '-999px'
    imgDom.style.opacity = 0
    imgDom.src = el.src
    el.src = ''
    imgDom.onload = () => {
        let width = imgDom.width
        let height = imgDom.height
        if (width > height) {
            el.style.height = '100%'
            el.style.width = 'auto'
            el.style.position = 'absolute'
            el.style.left = '50%'
            el.style.top = '0'
            el.style.transform = 'translateX(-50%)'
            el.style.webkitTransform = "translateX(-50%) translateY(0)";
            el.style.MozTransform = "translateX(-50%) translateY(0)";
            el.style.msTransform = "translateX(-50%) translateY(0)";
            el.style.OTransform = "translateX(-50%) translateY(0)";
        } else if (width < height) {
            el.src = imgDom.src
            el.style.width = '100%'
            el.style.height = 'auto'
            el.style.position = 'absolute'
            el.style.top = '50%'
            el.style.left = '0'
            el.style.transform = 'translateY(-50%) translateX(0)'
            el.style.webkitTransform = "translateY(-50%) translateX(0)";
            el.style.MozTransform = "translateY(-50%) translateX(0)";
            el.style.msTransform = "translateY(-50%) translateX(0)";
            el.style.OTransform = "translateY(-50%) translateX(0)";
        } else {
            el.style.width = '100%'
            el.style.height = '100%'
            el.style.position = 'absolute'
            el.style.top = '0'
            el.style.left = '0'
            el.style.transform = 'translateY(0) translateX(0)'
            el.style.webkitTransform = "translateY(0) translateX(0)";
            el.style.MozTransform = "translateY(0) translateX(0)";
            el.style.msTransform = "translateY(0) translateX(0)";
            el.style.OTransform = "translateY(0) translateX(0)";
        }
        // if (el.alt == '视频资料' || el.alt == '视频') {
        //     el.style.width = '52px'
        //     el.style.height = '42px'
        //     el.style.display = 'block'
        //     el.style.margin = 'auto'
        //     el.style.marginTop = '60px'
        //     el.style.position = 'initial'
        //     el.style.top = '0'
        //     el.style.left = '0'
        //     el.style.transform = 'translateY(0) translateX(0)'
        //     el.style.webkitTransform = "translateY(0) translateX(0)";
        //     el.style.MozTransform = "translateY(0) translateX(0)";
        //     el.style.msTransform = "translateY(0) translateX(0)";
        //     el.style.OTransform = "translateY(0) translateX(0)";
        // }
        el.src = imgDom.src
    }
})
//点击空白处隐藏div指令
Vue.directive('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__;
    },
})