import factoryCreate from '../class/factoryCreate'
import store from '@/store'
export default (el) => {
  const diyPage = document.getElementById('diy-page')
  document.getElementById('diy-aside').style.overflowY = 'hidden'
  document.getElementById('main-container').style.overflowY = 'hidden'
  const maxH = parseInt(diyPage.offsetHeight) - 10 + 44
  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 = el.clientX - ol >= 345 ? 345 : el.clientX - ol
  const y = el.clientY - ot + st + mst >= maxH - 20 ? maxH - 20 : el.clientY - ot + st + mst
  store.commit('addDiyList', factoryCreate({ x, y, w: 0, h: 0, z: store.state.mousedown.zIndex, type: 'customPage' }))
  const id = store.state.diyList[store.state.diyList.length - 1].id
  store.commit('updateMousedown', {
    zIndex: store.state.mousedown.zIndex + 1,
    activeId: id
  })
  document.onmousemove = function (e) {
    const d = document.getElementById(id)
    const l = parseInt(d.offsetLeft)
    const w = e.clientX - ol - d.offsetLeft + l >= 365 ? 365 - l : e.clientX - ol - d.offsetLeft
    const h = e.clientY - ot + st + mst - d.offsetTop > maxH - y ? maxH - y : e.clientY - ot + st + mst - d.offsetTop
    d.style.width = w + 'px'
    d.style.height = h + 'px'
    store.commit('updateDiylistById', { id, update: { w, h } })
  }
}