"use strict";
// 拖拽
function Drag (el, options) {
  var $el = this.getEl(el)
  if ($el) {
    this.$el = $el
  } else {
    console.warn('期待参数有误')
    return
  }
  this.init()
  this.initParams(options)
}

Drag.prototype = {
  // 查找正确的元素
  getEl: function (el) {
    if (typeof el === 'string') {
      if (document.querySelector) {
        return document.querySelector(el)
      } else {
        if (el.indexOf('#') > 0) {
          return document.getElementById(el)
        } else if (el.indexOf('.') > 0) {
          console.warn('期待参数为元素或ID')
          return fasle
        } else {
          return document.getElementsByTagName(el)[0]
        }
      }
    } else if (typeof el === 'object') {
      return el
    } else if (typeof el === 'array'){
      return el[0]
    }
    return false
  },
  // 初始化
  init: function () {
    var _this = this
    this.$el.onmousedown = function () {
      _this.dragDown(_this)
    }
  },
  // 初始化参数
  initParams: function (options) {
    var options = options || {}
    options.left = this.$el.offsetLeft
    options.top = this.$el.offsetTop
    this._params = options
  },
  // 鼠标按下
  dragDown: function (_this, ev) {
    var oEvent = ev || event
    var $el = _this.$el
    var clientX = oEvent.clientX
    var clientY = oEvent.clientY
    var left = $el.offsetLeft
    var top = $el.offsetTop
    var disX = clientX - left
    var disY = clientY - top

    _this.disX = disX
    _this.disY = disY
    _this._params.downFn && _this._params.downFn({
      el: $el,
      clientX: clientX,
      offsetLeft: left,
      offsetTop: top,
      disX: disX,
      disY: disY
    })
    document.onmousemove = function () {
      _this.dragMove(_this)
    }
    document.onmouseup = function () {
      _this.dragUp(_this)
    }
  },
  // 鼠标移动
  dragMove: function (_this, ev) {
    var oEvent = ev || event
    var $el = _this.$el
    var clientY = oEvent.clientY
    var clientX = oEvent.clientX
    var disY = _this.disY
    var disX = _this.disX
    var top = clientY - disY
    var left = clientX - disX

    if (_this._params.boundary) {
      var clientHeight = document.documentElement.clientHeight
      var clientWidth = document.documentElement.clientWidth
      var elWidth = _this.$el.offsetWidth
      var elHeight = _this.$el.offsetHeight

      if (left <= 0) {
        left = 0
      } else if (left >= clientWidth - elWidth) {
        left = clientWidth - elWidth
      }
      if (top <= 0) {
        top = 0
      } else if (top >= clientHeight - elHeight) {
        top = clientHeight - elHeight
      }
    }

    _this._params.left = left
    _this._params.top = top
    $el.style.left = left + 'px'
    $el.style.top = top + 'px'
    _this._params.moveFn && _this._params.moveFn({
      el: $el,
      clientX: clientX,
      offsetLeft: left,
      offsetTop: top,
      disX: disX,
      disY: disY
    })
    oEvent.preventDefault()
  },
  // 鼠标抬起
  dragUp: function (_this) {
    var _params = _this._params
    _this._params.upFn && _this._params.upFn({
      left: _params.left,
      top: _params.top,
      el: _this.$el
    })
    document.onmousemove = null
    document.onmouseup = null
  }
}


// 碰撞检测
function CollisionDet (els) {
  this.$els = document.querySelectorAll(els)
}

CollisionDet.prototype = {
  test: function (ops, fn) {
    let arr = []
    this.$els.forEach(item => {
      let el = ops.el
      let l2 = el.offsetLeft
      let t2 = el.offsetTop
      let r2 = l2 + el.offsetWidth;
      let b2 = t2 + el.offsetHeight;

      let l1 = item.offsetLeft
      let t1 = item.offsetTop
      let r1 = l1 + item.offsetWidth;
      let b1 = t1 + item.offsetHeight;

      if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
      }else{
        arr.push(item)
        console.log('来了')
      }
    })
    fn && fn(arr)
  }
}
