<template>
  <div
    class="floating-ball"
    :style="ballStyle"
    @mousedown="startDrag"
    @touchstart="startDrag"
    @click="handleClick"
  >
    <slot>

    </slot>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  // 初始位置
  initialPosition: {
    type: Object,
    default: () => ({ x: 0, y: 0 })
  },
  // 是否可拖动
  draggable: {
    type: Boolean,
    default: true
  },
  // 自动吸附边缘的阈值
  snapThreshold: {
    type: Number,
    default: 0
  }
});
// watch(() => props.initialPosition, (newVal) => {
//   position.value = { x: newVal.x, y: newVal.y };
// },{deep:true})
const emit = defineEmits(['click']);

const position = ref({ x: props.initialPosition.x, y: props.initialPosition.y });
const isDragging = ref(false);
const startPos = ref({ x: 0, y: 0 });
const startMousePos = ref({ x: 0, y: 0 });

const ballStyle = ref({
  left: `${position.value.x}px`,
  top: `${position.value.y}px`,
  cursor: props.draggable ? 'move' : 'pointer'
});

// 开始拖动
const startDrag = (e) => {
  if (!props.draggable) return;

  isDragging.value = true;
  startPos.value = { ...position.value };

  // 处理鼠标和触摸事件
  if (e.type === 'mousedown') {
    startMousePos.value = { x: e.clientX, y: e.clientY };
  } else if (e.type === 'touchstart') {
    startMousePos.value = { x: e.touches[0].clientX, y: e.touches[0].clientY };
  }

  // 阻止默认行为和冒泡
  e.preventDefault();
  e.stopPropagation();
};

// 处理移动
const handleMove = (e) => {
  if (!isDragging.value) return;

  let clientX, clientY;
  if (e.type === 'mousemove') {
    clientX = e.clientX;
    clientY = e.clientY;
  } else if (e.type === 'touchmove') {
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  }

  const dx = clientX - startMousePos.value.x;
  const dy = clientY - startMousePos.value.y;

  position.value = {
    x: startPos.value.x + dx,
    y: startPos.value.y + dy
  };

  updatePosition();
};

// 结束拖动
const endDrag = () => {
  if (!isDragging.value) return;
  isDragging.value = false;
  snapToEdge();
};

// 自动吸附到边缘
const snapToEdge = () => {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  // 检查是否靠近左右边缘
  if (position.value.x < props.snapThreshold) {
    position.value.x = 0;
  } else if (position.value.x > windowWidth - props.snapThreshold) {
    position.value.x = windowWidth;
  }

  // 检查是否靠近上下边缘
  if (position.value.y < props.snapThreshold) {
    position.value.y = 0;
  } else if (position.value.y > windowHeight - props.snapThreshold) {
    position.value.y = windowHeight;
  }

  updatePosition();
};

// 更新位置样式
const updatePosition = () => {
  ballStyle.value = {
    ...ballStyle.value,
    left: `${position.value.x}px`,
    top: `${position.value.y}px`
  };
};

// 点击事件
const handleClick = (e) => {
  if (isDragging.value) {
    // 如果是拖动结束的点击，不触发点击事件
    isDragging.value = false;
    return;
  }
  emit('click', e);
};

// 添加事件监听
onMounted(() => {
  window.addEventListener('mousemove', handleMove);
  window.addEventListener('touchmove', handleMove);
  window.addEventListener('mouseup', endDrag);
  window.addEventListener('touchend', endDrag);
});

// 移除事件监听
onUnmounted(() => {
  window.removeEventListener('mousemove', handleMove);
  window.removeEventListener('touchmove', handleMove);
  window.removeEventListener('mouseup', endDrag);
  window.removeEventListener('touchend', endDrag);
});
</script>

<style scoped>
.floating-ball {
  position: fixed;
  cursor: pointer;
  width: 50px;
  padding: 10px;
  /* height: 50px; */
  /* border-radius: 50%; */
  /* background-color: #409eff; */
  color: white;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  user-select: none;
  /* transition: all 0.3s ease; */
  transform: translate(-50%, -50%);
}

.ball-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.icon {
  font-size: 24px;
}

.floating-ball:active {
  opacity: 0.8;
}
</style>
