/* eslint-disable */
var selectable = {
  bind: function (el, binding, vnode) {
    var rect = {
      el: null,
      isMove: false,
      from: {
        x: 0,
        y: 0
      },
      to: {
        x: 0,
        y: 0
      },
      init() {
        this.el = document.createElement('div');
        el.append(this.el);
        this.el.style.left = this.from.x + "px";
        this.el.style.top = this.from.y + "px";
        this.el.setAttribute("class", "selectable");
      },
      move() {
        var width = this.to.x - this.from.x;
        var height = this.to.y - this.from.y;

        if (width >= 0) {
          this.el.style.left = this.from.x + "px";
        } else {
          this.el.style.left = this.to.x + "px";
        }

        if (height >= 0) {
          this.el.style.top = this.from.y + "px";
        } else {
          this.el.style.top = this.to.y + "px";
        }

        this.el.style.width = Math.abs(width) + 'px';
        this.el.style.height = Math.abs(height) + 'px';

        this.selectItems();
      },
      remove() {
        if (this.el) {
          this.el.remove();
        }
      },
      selectItems() {
        document.querySelectorAll('.resable-item').forEach(item => {
          if (this.isIntersection(this.el, item)) {
            item.classList.add('selected');
          } else {
            item.classList.remove('selected');
          }
        })
      },
      // 判断两个矩形是否存在交集
      isIntersection(rect1, rect2) {
        let maxX, maxY, minX, minY;

        rect1.width = parseInt(rect1.style.width);
        rect1.height = parseInt(rect1.style.height);
        rect2.width = parseInt(rect2.style.width);
        rect2.height = parseInt(rect2.style.height);

        maxX = rect1.offsetLeft + rect1.width >= rect2.offsetLeft + rect2.width ? rect1.offsetLeft + rect1.width : rect2.offsetLeft + rect2.width;
        maxY = rect1.offsetTop + rect1.height >= rect2.offsetTop + rect2.height ? rect1.offsetTop + rect1.height : rect2.offsetTop + rect2.height;
        minX = rect1.offsetLeft <= rect2.offsetLeft ? rect1.offsetLeft : rect2.offsetLeft;
        minY = rect1.offsetTop <= rect2.offsetTop ? rect1.offsetTop : rect2.offsetTop;
        // console.log('rect1.offsetLeft=' + rect1.offsetLeft + ", rect1.offsetTop=" + rect1.offsetTop + ', rect2.offsetLeft=' + rect2.offsetLeft + ", rect2.offsetTop = " + rect2.offsetTop);
        // console.log('rect1.width=' + rect1.width + ", rect1.height=" + rect1.height + ', rect2.width=' + rect2.width + ", rect2.height = " + rect2.height);

        if (maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height) {
          return true;
        } else {
          return false;
        }
      }
    }
    document.oncontextmenu = new Function('event.returnValue=false;');
    document.onselectstart = new Function('event.returnValue=false;');
    el.onmousedown = function (e) {
      rect.from.x = e.offsetX;
      rect.from.y = e.offsetY;
      rect.to.x = e.offsetX;
      rect.to.y = e.offsetY;
      rect.isMove = true;
      rect.init();
      document.onmouseup = function (e) {
        rect.isMove = false;
        rect.remove();
      }
    }
    el.onmousemove = function (e) {
      if (rect.isMove) {
        rect.to.x += e.movementX;
        rect.to.y += e.movementY;
        // console.log("movementX=" + e.movementX + ", movementY=" + e.movementY)
        rect.move();
      }
    }
    document.onmousedown = function () {
      document.querySelectorAll('.resable-item').forEach(item => {
        item.classList.remove('selected');
      });
    }
  },
  update: function (el, binding, vnode) {
    var fields = binding.value;
    //  键盘操作
    document.onkeyup = function (e) {
      let dX = 0;
      let dY = 0;
      if (e.keyCode == 39) {
        dX = 1;
      } // 右键
      else if (e.keyCode == 37) {
        dX = -1;
      } // 左键
      else if (e.keyCode == 38) {
        dY = -1;
      } // 上键
      else if (e.keyCode == 40) {
        dY = 1;
      } // 下键

      document.querySelectorAll(".resable-item.selected").forEach(item => {
        let key = item.attributes["data-key"].value;
        let field = fields.find(item => {
          return item.key == key;
        });
        if (!field) return;

        field.options.x += dX;
        field.options.y += dY;
      });
    }
  }
}

export {
  selectable
}