import Vue from 'vue';
//
// /**
//  *  自定义指令
//  */
Vue.directive('title2',function (el, binding, vcode) {
    el.title = el.innerText;
})

Vue.directive('title', {
    // 钩子函数，被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
    inserted(el,binding,vcode){
        el.focus()
        el.title = el.innerText;
        // console.log( 'inserted',el,binding,vcode );
    },
    // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
    bind(el,binding,vcode){
        // el.title = el.innerText;
        // console.log(el,binding,vcode);
        // console.log( 'bind',el,binding,vcode );
    },
    // 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。
    // 指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
    update(el,binding,vcode){
        // el.title = window.$(el).get(0).innerText;
        // console.log( 'update',window.$(el), el,binding,vcode );
    },
    // 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
    componentUpdated( el,binding,vcode ){
        el.title = el.innerText;
        // console.log( 'componentUpdated',el,binding,vcode  );
    },
    // 只调用一次，指令与元素解绑时调用。
    unbind(){
        console.log( 'unbind' );
    }
})

/**
 * 当输入框获取到焦点时，
 * 为 show-focus 类 所在dom ，添加边框颜色类 el-focus
 * v-focus 指令必须和show-focus配合使用  否则无效
 */
Vue.directive('focus',function (el, binding, vcode) {
    let mtinputList = el.querySelectorAll('input')
    if(!mtinputList){
        mtinputList = el.querySelectorAll('textarea')
    }
    let mtinput = null;
    if(!binding.value){
        mtinput = mtinputList[0]

        mtinput.onfocus = function () {
            let dom = window.$(el).parents('.show-focus');
            if(dom.length < 1){
                window.$(mtinput).addClass('el-focus')
            }else{
                dom.addClass('el-focus');
            }
        }
        mtinput.onblur = function () {
            let dom = window.$(el).parents('.show-focus');
            if(dom.length < 1){
                window.$(mtinput).removeClass('el-focus')
            }else{
                dom.removeClass('el-focus');
            }
        }

    }else{
        for (let i=0; i < Number(binding.value) ; i++){
            mtinput = mtinputList[i]
            mtinput.onfocus = function () {
                let dom = window.$(el).parents('.show-focus');
                dom.addClass('el-focus');
            }
            mtinput.onblur = function () {
                let dom = window.$(el).parents('.show-focus');
                dom.removeClass('el-focus');
            }
        }
    }

})

/**
 * 输入汉字为两个字符，英文为1个字符
 */
Vue.directive('limitChineseMaxlength',{
    // 钩子函数，被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
    inserted(el,binding,vcode){
        limitCharsFun(el,binding,vcode);
    },
    // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
    bind(el,binding,vcode){
        limitCharsFun(el,binding,vcode);
    },
    // 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。
    // 指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
    update(el,binding,vcode){
    },
    // 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
    componentUpdated( el,binding,vcode ){
        limitCharsFun(el,binding,vcode);
    },
    // 只调用一次，指令与元素解绑时调用。
    unbind(){
    }
})
const limitCharsFun = function (el,binding,vcode){
    window.$(el).removeClass('is-exceed')
    let element = el.querySelector('.el-input__count-inner');
    let mtinputList = el.querySelectorAll('input')
    if(!mtinputList){
        mtinputList = el.querySelectorAll('textarea')
    }
    let mtinput = null;
    mtinput = mtinputList[0]
    let maxLength = vcode.data.attrs.maxlength;
    if (!maxLength){
        maxLength = 60;
    }
    mtinput.setAttribute('maxlength',maxLength*2)
    // mtinput.setAttribute("style","border-color:var(--themeColor9_5)")
    if (element){
        element.setAttribute('style',"color:#909399")
    }
    let inputValue = mtinput.value || vcode.data.model.value;
    if (common.wordLengthFilter(inputValue)> maxLength){
        if (common.byteLengthFilter(inputValue)>maxLength * 2){
            mtinput.value =  common.subinput(inputValue,maxLength*2);
        }else{
            mtinput.value =  common.subinput(inputValue,common.byteLengthFilter(inputValue));
        }
        mtinput.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新,下面相同
    }
    let innerText = inputValue;
    if (element){
        element.innerHTML = common.wordLengthFilter(innerText)+'/'+maxLength
    }

};

/**
 *图片高度根据宽高比例自适应
 */
Vue.directive('proportion', {
    inserted: function (el, binding) {
        var w = el.offsetWidth;
        var h = w * binding.value;
        el.style.height = h + 'px';
        el.__resize = function () { update(el, binding); }
        window.addEventListener('resize', el.__resize);
    },

    componentUpdated: function (el, binding) {
        update(el, binding);
    },

    unbind: function (el) {
        window.removeEventListener('resize', el.__resize);
    }
});

