// 引入拖拽js
import { startDrag } from './drag.js'
 
/**
 * 为el-dialog弹框增加拖拽功能
 * @param {*} el 指定dom
 * @param {*} binding 绑定对象
 * desc   只要用到了el-dialog的组件，都可以通过增加v-draggable属性变为可拖拽的弹框
 */
const draggable = (el, binding) => {
    // 绑定拖拽事件 [绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]
    startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
};


//下拉框懒加载
const SelectLazyLoading={
    inserted(el,binding){
        let SELECT_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap") || el.querySelector('.el-autocomplete-suggestion__wrap') ;
            // console.log(SELECT_DOM)
            if(!SELECT_DOM){
                return false
            }
            SELECT_DOM.addEventListener("scroll", function () {
                // scrollHeight:当前所有选项的高度
              // scrollTop:滚动的距离
              // clientHeight:下拉框的高度
            //   console.log(SELECT_DOM,this.scrollHeight , this.scrollTop , this.clientHeight,this.scrollHeight - this.scrollTop - 1 <= this.clientHeight)
              let condition = this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;
              if (condition) {
                binding.value();
              }
            });
    }
}
//块禁止样式
const disabled = (el,binding)=>{
    if(binding.value){
        // el.style.pointerEvents = 'none';
        // el.style.cursor='not-allowed';
        el.classList.add('pointerEvents')
        if(el.parentNode){
            // el.parentNode.style.cursor='not-allowed';
            // el.parentNode.style.pointerEvents='none';
            el.parentNode.classList.add('disabled')
        }
        el.style.color='#bbb'
    }else{
        // el.style.pointerEvents = '';
        // el.style.cursor='';
        el.classList.remove('pointerEvents')
        if(el.parentNode){
            el.parentNode.classList.remove('disabled')
            // el.parentNode.style.cursor='';
            // el.parentNode.style.pointerEvents='';
        }
        el.style.color=''
    }
}

//获取高度
const DivHeight={
    inserted(el,binding){
        binding.value(el.offsetHeight)
    }
}



const directives = {
    draggable,
    SelectLazyLoading,
    disabled,
    DivHeight,
};
// 这种写法可以批量注册指令
export default {
  install(Vue) {
      Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};