
//拖动对话框
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 }

        // 对话框居中
        const centerDialog = () => {
            // 等待DOM更新完成
            setTimeout(() => {
                const dialogRect = dialogEl.getBoundingClientRect()
                const centerX = (window.innerWidth - dialogRect.width) / 2
                const centerY = (window.innerHeight - dialogRect.height) / 2

                // 应用居中样式
                dialogEl.style.cssText += `
                    top: ${centerY}px;
                    left: ${centerX}px;
                    transform: none;  // 清除element默认transform
                `
                // 更新初始位置记录
                dialogStart.top = centerY
                dialogStart.left = centerX
            }, 50) // 适当延迟确保元素渲染
        }

        // 监听对话框打开事件，打开时让对话框居中
        const dialogComponent = vnode.componentInstance
        if (dialogComponent) {
            dialogComponent.$watch('visible', (newVal) => {
                if (newVal) {
                    centerDialog()  // 每次打开都居中
                    // 添加窗口resize监听
                    window.addEventListener('resize', centerDialog)
                } else {
                    // 关闭时移除resize监听
                    window.removeEventListener('resize', centerDialog)
                }
            })
        }

        //监听鼠标左键按下事件
        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
                dialogStart.left = rect.left
                document.body.style.userSelect = 'none';
            }
        })

        //监听鼠标移动事件
        document.addEventListener('mousemove', (event) => {
            if (dragging) {
                const deltaX = event.clientX - dragStart.x
                const deltaY = event.clientY - dragStart.y
                // 直接设置新位置，无边界约束
                dialogEl.style.top = `${dialogStart.top + deltaY}px`
                dialogEl.style.left = `${dialogStart.left + deltaX}px`
            }
        })

        //监听鼠标松开事件
        document.addEventListener('mouseup', () => {
            dragging = false
            document.body.style.userSelect = ''
        })

        // 组件销毁时的清理
        const cleanup = () => {
            window.removeEventListener('resize', centerDialog)
            headerEl.removeEventListener('mousedown', startDrag)
            document.removeEventListener('mousemove', onDrag)
            document.removeEventListener('mouseup', stopDrag)
        }

        // Vue2销毁钩子
        vnode.context.$on('hook:destroyed', cleanup)
        // Vue3兼容
        if (vnode.componentInstance && vnode.componentInstance.$options) {
            vnode.componentInstance.$on('hook:beforeDestroy', cleanup)
        }

        // 初始化定位样式
        dialogEl.style.position = 'fixed'
        dialogEl.style.margin = '0'
    }
}