//拖动对话框
export default {
    bind(el, binding, vnode) {
        const dialogEl = el.querySelector('.el-dialog')
        const headerEl = el.querySelector('.el-dialog__header')

        let dragging = false
        let dragStart = { x: 0, y: 0 }
        let dialogStart = { top: 0, left: 0 }

        //向对话框注册鼠标按下事件
        headerEl.addEventListener('mousedown', (event) => {
            if (event.button === 0) {//按下的是左键
                dragging = true;
                dragStart.x = event.clientX
                dragStart.y = event.clientY
                const rect = dialogEl.getBoundingClientRect()
                dialogStart.top = rect.top + window.scrollY
                dialogStart.left = rect.left + window.scrollX
                document.body.style.userSelect = 'none'; // 禁止文本选择
            }
        })

        document.addEventListener('mousemove', (event) => {
            if (dragging) {
                const deltaX = event.clientX - dragStart.x - 400
                const deltaY = event.clientY - dragStart.y - 110
                dialogEl.style.top = `${dialogStart.top + deltaY}px`
                dialogEl.style.left = `${dialogStart.left + deltaX}px`
            }
        })

        document.addEventListener('mouseup', () => {
            dragging = false
            document.body.style.userSelect = '' // 恢复文本选择
        })

        // 在组件销毁时移除事件监听器
        el._removeDragListeners = () => {
            headerEl.removeEventListener('mousedown', startDrag)
            document.removeEventListener('mousemove', onDrag)
            document.removeEventListener('mouseup', stopDrag)
        }

        // 使用 Vue 的 onBeforeUnmount 钩子（或在 Vue 2 中使用 destroyed 钩子）来移除监听器
        //vnode.context.$once('hook:beforeUnmount', el._removeDragListeners);
        // 对于 Vue 2，使用以下代码代替上面的行：
        vnode.context.$on('hook:destroyed', el._removeDragListeners);

        // 注意：在 Vue 3 中，由于函数式组件和组合式 API 的引入，
        // 你可能需要使用 `onUnmounted` 或其他方法来确保在组件销毁时清理资源。

        function startDrag(event) {
            // 这里的逻辑与上面的 headerEl.addEventListener 中的逻辑相同，
            // 但由于我们将其封装在了一个函数中，所以可以在需要时调用或移除。
            // 然而，在这个例子中，我们直接在事件监听器中使用了内联函数，
            // 因此这个 `startDrag` 函数实际上没有被使用。你可以根据需要选择是否保留它。
        }

        function onDrag(event) {
            // 同上，这里的逻辑与 document.addEventListener('mousemove') 中的逻辑相同。
        }

        function stopDrag() {
            // 同上，这里的逻辑与 document.addEventListener('mouseup') 中的逻辑相同。
        }
    }
}