// 定义一个自定义指令，用来实现拖拽的逻辑
export const vDrag = {
  // 在元素被插入到 DOM 前调用
  beforeMount(el) {
    // 定义一些变量，用来存储拖拽的状态
    let isDown = false; // 是否按下鼠标
    let offsetX = 0; // 鼠标相对于元素的水平偏移量
    let offsetY = 0; // 鼠标相对于元素的垂直偏移量

    // 定义一个函数，用来处理鼠标按下的事件
    function handleMouseDown(e) {
      // 设置按下的标志为 true
      isDown = true;
      // 计算鼠标相对于元素的偏移量
      offsetX = e.clientX - el.offsetLeft;
      offsetY = e.clientY - el.offsetTop;
    }

    // 定义一个函数，用来处理鼠标移动的事件
    function handleMouseMove(e) {
      // 如果按下的标志为 true，才执行拖拽的逻辑
      if (isDown) {
        // 计算元素的新位置
        let left = e.clientX - offsetX;
        let top = e.clientY - offsetY;
        // 设置元素的样式，使其移动到新位置
        el.style.left = left + 'px';
        el.style.top = top + 'px';
      }
    }

    // 定义一个函数，用来处理鼠标松开的事件
    function handleMouseUp() {
      // 设置按下的标志为 false
      isDown = false;
    }

    // 给元素添加鼠标按下的事件监听器
    el.addEventListener('mousedown', handleMouseDown);
    // 给 document 添加鼠标移动的事件监听器，这样可以使元素跟随鼠标移动，即使鼠标移出了元素的范围
    document.addEventListener('mousemove', handleMouseMove);
    // 给 document 添加鼠标松开的事件监听器，这样可以使元素停止移动，即使鼠标松开在元素外面
    document.addEventListener('mouseup', handleMouseUp);
  },
  // 在绑定元素的父组件卸载后调用
  // unmounted(el) {
  //   // 移除之前添加的事件监听器，避免内存泄漏
  //   el.removeEventListener('mousedown', handleMouseDown);
  //   document.removeEventListener('mousemove', handleMouseMove);
  //   document.removeEventListener('mouseup', handleMouseUp);
  // },
};
