import Vue from 'vue'
Vue.directive("scroll", {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el, binding) {
    let options = binding.expression
      ? JSON.parse(binding.expression)
      : {
        axis: "yx",
        theme: "dark",
        scrollInertia: 300
      };
  }
});
Vue.directive('dragable',(el)=> {
  let oDiv = el; //当前元素
  let self = this; //上下文
  //禁止选择网页上的文字
  document.onselectstart = function () {
    return false;
  };
  oDiv.onmousedown = function (e) {
    //鼠标按下，计算当前元素距离可视区的距离
    let disX = e.clientX - oDiv.offsetLeft;
    let disY = e.clientY - oDiv.offsetTop;
    document.onmousemove = function (e) {
      //通过事件委托，计算移动的距离
      let l = e.clientX - disX;
      let t = e.clientY - disY;
      // 获取html可视区域高度
      const width = document.querySelector(".area").clientWidth;
      const height = document.querySelector(".area").clientHeight;
      if (l >= width - 100) {
        l = width - 100;
      } else if (l <= 0) {
        l = 0;
      }
      if (t >= height - 100) {
        t = height - 100;
      } else if (t <= 0) {
        t = 0;
      }
      //移动当前元素
      oDiv.style.left = l + "px";
      oDiv.style.top = t + "px";
    };
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    };
    //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
    return false;
  };
})

Vue.directive('resize', {
  bind(el) {
    let scale = 1;

    el.addEventListener('wheel', function (e) {
      e.preventDefault();

      var zoomDelta = e.deltaY > 0 ? 0.1 : -0.1;
      scale += zoomDelta;
      scale = Math.max(0.1, scale);

      el.style.transform = `scale(${scale})`;
    });
  }
});
Vue.directive("drag", {
  bind: function (el, binding, vnode, oldVnode) {
    let header = el.querySelector(".el-dialog__header") || el;
    let body = el.querySelector(".el-dialog") || el;
    header.onmousedown = e => {
      if (e.button != 0) {
        return false;
      }
      {
        if (!body.isInitDrag) {
          body.style.cssText = `transform:none;
                    width:${body.offsetWidth}px;
                    height:${body.offsetHeight}px;
                    left:${parseInt(body.offsetWidth / document.body.offsetWidth) + "%"};
                    top:${body.offsetTop}px;
                    bottom:"auto"`;

          body.isInitDrag = true;
        }
      }
      window.onselectstart = window.ondragstart = () => {
        return false;
      };
      let offsetX = e.clientX;
      let offsetY = e.clientY;
      let domLeft = parseFloat(body.style.left);
      let domTop = parseFloat(body.style.top);
      window.onmousemove = _.throttle(e => {
        body.style.left = e.clientX - offsetX + domLeft + "px";
        body.style.top = e.clientY - offsetY + domTop + "px";
        if (parseInt(body.style.top) < 0) {
          body.style.top = 0;
        }
      }, 20);
      window.onmouseup = () => {
        window.onmouseup = window.onmousemove = window.onselectstart = window.ondragstart = null;
      };
    };
  }
});
