import store from '@/store'
export default {
  bind: function (el, binding, vnode, oldVnode) {
    el.onmousedown = function (e) {
      store.commit('updateMousedown', { startTime: new Date() })
      document.getElementById('diy-aside').style.overflowY = 'hidden'
      document.getElementById('main-container').style.overflowY = 'hidden'
      const diyPage = document.getElementById('diy-page')
      const ol = parseInt(diyPage.offsetLeft) //  距离浏览器左边宽度，鼠标client应该减去这个值
      const ot = parseInt(diyPage.offsetTop) //  距离浏览器顶部边高度，鼠标client应该减去这个值
      const mst = document.getElementById('main-container').scrollTop // main容器卷起高度，热点定位需要加上这个高度
      const st = document.getElementById('diy-aside').scrollTop // 容器卷起高度，热点定位需要加上这个高度
      const x = e.offsetX
      const y = e.offsetY
      el.style.cursor = 'move'
      e.stopPropagation()
      document.onmousemove = function (e) {
        const w = parseInt(el.style.width)
        const h = parseInt(el.style.height)
        const l = e.clientX - ol - x <= 10 ? 10 : e.clientX - ol - x + w >= 365 ? 365 - w : e.clientX - ol - x
        const maxH = parseInt(document.getElementById('diy-page').offsetHeight) - 10 + 44
        const t = e.clientY - ot + st + mst - y <= 44 ? 44 : e.clientY - ot + st + mst - y + h >= maxH ? maxH - h : e.clientY - ot + st + mst - y
        el.style.left = l + 'px'
        el.style.top = t + 'px'
        store.commit('updateDiylistById', { id: el.id, update: { x: l, y: t } })
      }
      el.onmouseup = function () {
        el.style.cursor = 'auto'
        document.onmousemove = el.onmouseup = null
        document.getElementById('diy-aside').style.overflowY = 'auto'
        document.getElementById('main-container').style.overflowY = 'auto'
      }
    }
  }
}