import dialogDrag from './_dialog-drag'
import { watch } from 'vue'
const _dialogDrag = {
  // mounted 
  mounted (el: any, binding: any) {
    // 監(jiān)聽 dialog 是否顯示的狀態(tài)
    watch (binding.value, () => {
      // dialog 不可見，退出
      if (!binding.value.visible) return
      // 尋找 el-dialog 組件
      const container = el.firstElementChild.firstElementChild
      // 已經(jīng)設(shè)置拖拽事件，退出
      if (container.onmousemove) return
      // 等待 DOM 渲染完畢
      setTimeout(() => {
        // 拖拽的 “句柄”
        const _dialogTitle = el.getElementsByClassName('el-dialog__header')
        if (_dialogTitle.length === 0) {
          // 還沒有渲染完畢，或則其他原因
          console.warn('沒有找到要拖拽的 el-dialog', el)
        } else {
          const { setDialog } = dialogDrag()
          const dialogTitle = _dialogTitle[0]
          // 彈窗
          const dialog = el.firstElementChild.firstElementChild.firstElementChild
          // 通過 css 尋找 el-dialog 設(shè)置的寬度
          const arr = dialog.style.cssText.split(';')
          const width = arr[0].replace('%', '').replace('--el-dialog-width:', '') //
          // 設(shè)置 el-dialog 組件、彈窗、句柄、寬度
          setDialog(container, dialog, dialogTitle, width)
        }
      },300)
    })
  },
}
/**
 * 注冊(cè)拖拽 dialog 的自定義指令
 * @param app 
 * @param options 
 */
const install = (app: any, options: any) => {
  app.directive('dialogDrag', _dialogDrag)
}
export {
  _dialogDrag,
  install
}

/**
 * 拖拽 dialog 的函數(shù)，目前支持 element-plus
 */
export default function dialogDrag () {
  /**
   * 設(shè)置拖拽事件
   * @param container 大容器，比如蒙版。
   * @param dialog 被拖拽的窗口
   * @param dialogTitle 拖拽的標(biāo)題
   * @param width 寬度比例
   */
  const setDialog = (container: any, dialog: any, dialogTitle: any, width: number) => {
    const oldCursor = dialogTitle.style.cursor
    // 可視窗口的寬度
    const clientWidth = document.documentElement.clientWidth
    // 可視窗口的高度
    const clientHeight = document.documentElement.clientHeight
    // 根據(jù)百分?jǐn)?shù)計(jì)算寬度
    const tmpWidth = clientWidth * (100 - width) / 200
    // 默認(rèn)寬度和高度
    const domset = {
      x: tmpWidth,
      y: clientHeight * 15 / 100 // 根據(jù) 15vh 計(jì)算
    }
    // 查看dialog 當(dāng)前的寬度和高低
    if (dialog.style.marginLeft === '') {
      dialog.style.marginLeft = domset.x + 'px'
    } else {
      domset.x = dialog.style.marginLeft.replace('px','') * 1
    }
    if (dialog.style.marginTop === '') {
      dialog.style.marginTop = domset.y + 'px'
    } else {
      domset.y = dialog.style.marginTop.replace('px','') * 1
    }
    // 記錄拖拽開始的光標(biāo)坐標(biāo)，0 表示沒有拖拽
    const start = { x: 0, y: 0 }
    // 移動(dòng)中記錄偏移量
    const move = { x: 0, y: 0 }
    // 經(jīng)過時(shí)改變鼠標(biāo)指針形狀
    dialogTitle.onmouseover = () => {
      dialogTitle.style.cursor = 'move' // 改變光標(biāo)形狀
    }
    // 鼠標(biāo)按下，開始拖拽
    dialogTitle.onmousedown = (e: any) => {
      start.x = e.clientX
      start.y = e.clientY
      dialogTitle.style.cursor = 'move' // 改變光標(biāo)形狀
    }
    // 鼠標(biāo)移動(dòng)，實(shí)時(shí)跟蹤 dialog
    container.onmousemove = (e: any) => {
      if (start.x === 0) { // 不是拖拽狀態(tài)
        return
      }
      move.x = e.clientX - start.x
      move.y = e.clientY - start.y
      // 初始位置 + 拖拽距離
      dialog.style.marginLeft = (domset.x + move.x) + 'px'
      dialog.style.marginTop = (domset.y + move.y) + 'px'
    }
    // 鼠標(biāo)抬起，結(jié)束拖拽
    container.onmouseup = (e: any) => {
      if (start.x === 0) { // 不是拖拽狀態(tài)
        return
      }
      move.x = e.clientX - start.x
      move.y = e.clientY - start.y
      // 記錄新坐標(biāo)，作為下次拖拽的初始位置
      domset.x += move.x
      domset.y += move.y
      dialogTitle.style.cursor = oldCursor
      dialog.style.marginLeft = domset.x + 'px'
      dialog.style.marginTop = domset.y + 'px'
      // 結(jié)束拖拽
      start.x = 0
    }
  }
  return {
    setDialog // 設(shè)置
  }
}

<template>
  <!--拖拽-->
  <el-button @click="dialog.visible = true">打開</el-button>
  <div v-dialog-drag="dialog" >
    <el-dialog
      v-model="dialog.visible"
      title="自定義拖拽2"
      width="25%"
    >
      <span>拖拽測試</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog.visible = false">Cancel</el-button>
          <el-button type="primary" @click="dialog.visible = false">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue'
  import { _dialogDrag } from '../../../lib/main'
  export default defineComponent({
    name: 'nf-dialog-move',
    directives: {
      dialogDrag: _dialogDrag
    },
    props: {
    },
    setup(props, context) {
      const dialog = reactive({
        visible: false
      })
      return {
        meta,
        dialog
      }
    }
  })
</script>