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 parent = e.target.parentNode
      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 = parent.offsetLeft
      const y = parent.offsetTop
      e.stopPropagation()
      document.onmousemove = function (e) {
        const l = parseInt(parent.style.left)
        const t = parseInt(parent.style.top)
        const maxH = parseInt(document.getElementById('diy-page').offsetHeight) - 10 + 44
        const w = e.clientX - ol - x + l >= 365 ? 365 - l : e.clientX - ol - x
        const h = e.clientY - ot + st + mst - y + t >= maxH ? maxH - t : e.clientY - ot + st + mst - y
        parent.style.width = w + 'px'
        parent.style.height = h + 'px'
        store.commit('updateDiylistById', { id: parent.id, update: { w, h } })
      }
      el.onmouseup = function () {
        document.onmousemove = el.onmouseup = null
        document.getElementById('diy-aside').style.overflowY = 'auto'
        document.getElementById('main-container').style.overflowY = 'auto'
      }
    }
  }
}