/**
 * v-dialog-drag：让 Element UI 2.x 的 el-dialog 能用标题栏拖动。
 * Element UI 2.x 的 el-dialog 没有 draggable 属性（那是 Element Plus 的功能），
 * 所以这里用指令实现：只改 .el-dialog 的 transform，不改布局；
 * 弹窗关闭（wrapper 被置为 display:none）时自动复位，下次打开仍在原位。
 * 用法：<el-dialog v-dialog-drag custom-class="xxx">
 */
export default {
  inserted(el) {
    const dialog = el.querySelector('.el-dialog')
    const header = el.querySelector('.el-dialog__header')
    if (!dialog || !header) return
    let startX = 0
    let startY = 0
    let baseX = 0
    let baseY = 0
    let curX = 0
    let curY = 0
    let dragging = false

    const reset = () => {
      curX = 0
      curY = 0
      dialog.style.transform = ''
    }
    const onMove = (e) => {
      if (!dragging) return
      curX = baseX + (e.clientX - startX)
      curY = baseY + (e.clientY - startY)
      dialog.style.transform = 'translate(' + curX + 'px, ' + curY + 'px)'
      if (e.preventDefault) e.preventDefault()
    }
    const onUp = () => {
      if (!dragging) return
      dragging = false
      document.removeEventListener('mousemove', onMove)
      document.removeEventListener('mouseup', onUp)
    }
    const onDown = (e) => {
      if (e.button !== 0) return
      const t = e.target
      if (t && t.closest && t.closest('.el-dialog__headerbtn')) return
      dragging = true
      startX = e.clientX
      startY = e.clientY
      baseX = curX
      baseY = curY
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
      if (e.preventDefault) e.preventDefault()
    }

    header.addEventListener('mousedown', onDown)
    if (typeof MutationObserver !== 'undefined') {
      const mo = new MutationObserver(() => {
        if (el.style.display === 'none') reset()
      })
      mo.observe(el, { attributes: true, attributeFilter: ['style'] })
    }
  }
}