// 引入拖拽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 dragControllerDiv=(el, binding)=>{
  var resize = el.children[1];
  var left =el.children[0];
  var mid = el.children[2];
  var box = el;
  // if(!resize){
  //   return false
  // }
  resize.onmousedown = function (e) {
    //颜色改变提醒
    resize.style.background = '#818181';
    var startX = e.clientX;
    resize.left = resize.offsetLeft;
    // 鼠标拖动事件
    document.onmousemove = function (e) {
        var endX = e.clientX;
        var moveLen = resize.left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
        var maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

        if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
        if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

        resize.style.left = moveLen; // 设置左侧区域的宽度

            left.style.width = moveLen + 'px';
           if(mid){
            mid.style.width = (box.clientWidth - moveLen - 10) + 'px';
           }
        
    };
    // 鼠标松开事件
    document.onmouseup = function (evt) {
        //颜色恢复
        resize.style.background = '#d6d6d6';
        document.onmousemove = null;
        document.onmouseup = null;
        resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
    };
    resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
    return false;
};
 
};
const dragControllerDiv1=(el,binding)=>{
  var resize1 = el.children[2];
  var resize2 = el.children[1];
  var left = el.children[0];
  var mid = el.children[3];
  var box = el;
  if(resize2){
    dragControllerDiv2(el,binding)
    // return false
  }
      // 鼠标按下事件
      resize1.onmousedown = function (e) {
        var flex = box.style.flexDirection
        switch (flex) {
          case 'row-reverse':
            resize1.left = mid.offsetWidth;
              break;
          case 'row':
            resize1.left = left.offsetWidth;
              break;
          case 'column-reverse':
              break;
          case 'column':
              break;
          default:
              break;
      }
          //颜色改变提醒
          resize1.style.background = '#818181';
          var startX = e.clientX;
          // resize1.left = resize1.offsetLeft-50;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
             
              var endX = e.clientX;
              var moveLen = resize1.left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
              var maxT = box.clientWidth - resize1.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

              if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
              if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

              // resize1.style.left = moveLen; // 设置左侧区域的宽度

                  switch (flex) {
                      case 'row-reverse':
                          mid.style.width = moveLen + 'px';
                          if(left){
                           left.style.width = (box.clientWidth - moveLen - 10) + 'px';
                          }
                          break;
                      case 'row':
                          left.style.width = moveLen + 'px';
                          if(mid){
                              mid.style.width = (box.clientWidth - moveLen - 10) + 'px';
                          }
                          break;
                      case 'column-reverse':
                          
                          break;
                      case 'column':
                          
                          break;
                      default:
                          break;
                  }
             
              
          };
          // 鼠标松开事件
          document.onmouseup = function (evt) {
              //颜色恢复
              resize1.style.background = '#d6d6d6';
              document.onmousemove = null;
              document.onmouseup = null;
              resize1.releaseCapture && resize1.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize1.setCapture && resize1.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        }
};
const dragControllerDiv2=(el,binding)=> {
  var resize1 = el.children[1];
  // var resize2 = el.children[1];
  var left = el.children[0];
  var mid = el.children[3];
  var box = el
  mid.style.width = '100%'
  left.style.width = '100%'
      // 鼠标按下事件
      resize1.onmousedown = function (e) {
          var flex = box.style.flexDirection
          switch (flex) {
              case 'row-reverse':
                 
                  break;
              case 'row':
                  
                  break;
              case 'column-reverse':
                  resize1.top = mid.offsetHeight;
                  break;
              case 'column':
                  resize1.top = left.offsetHeight;
                  break;
              default:
                  break;
          }
          //颜色改变提醒
          resize1.style.background = '#818181';
          var startX = e.clientY;
          // resize1[i].top = resize1[i].offsetTop;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
              var endX = e.clientY;
              var moveLen = resize1.top + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
              var maxT = box.clientHeight - resize1.offsetHeight; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
              if (moveLen < 150) moveLen = 150; // 左边区域的最小宽度为32px
              if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

              resize1.style.top = moveLen; // 设置左侧区域的宽度
                  switch (flex) {
                      case 'row-reverse':
                         
                          break;
                      case 'row':
                          
                          break;
                      case 'column-reverse':
                          mid.style.height = moveLen + 10 + 'px';
                          if(left){
                              left.style.height = (box.clientHeight - moveLen ) + 'px';
                          }
                          break;
                      case 'column':
                          left.style.height = moveLen + 10 + 'px';
                          if(mid){
                              mid.style.height = (box.clientHeight - moveLen ) + 'px';
                          }
                          break;
                      default:
                          break;
                  }
             
          };
          // 鼠标松开事件
          document.onmouseup = function (evt) {
              //颜色恢复
              resize1.style.background = '#d6d6d6';
              document.onmousemove = null;
              document.onmouseup = null;
              resize1.releaseCapture && resize1.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize1.setCapture && resize1.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        }
};
//下拉框懒加载
const SelectLazyLoading=(el,binding)=>{
   
    let SELECT_DOM = el.querySelector(
      ".el-select-dropdown .el-select-dropdown__wrap"
    );
    if(!SELECT_DOM){
        return false
    }
    SELECT_DOM.addEventListener("scroll", function () {
        // scrollHeight:当前所有选项的高度
      // scrollTop:滚动的距离
      // clientHeight:下拉框的高度
      let condition = this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;
      if (condition) {
        binding.value();
      }
    });
}
const directives = {
    draggable,
    dragControllerDiv,
    dragControllerDiv1,
    SelectLazyLoading
};
// 这种写法可以批量注册指令
export default {
  install(Vue) {
      Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};