<template>
  <view
    class="fab-button"
    @touchstart.stop="startDrag"
    @touchmove.stop="onDrag"
    @touchend.stop="endDrag"
    :style="{ right: position.x + 'px', bottom: position.y + 'px' }"
  >
    <image
      class="w-full h-full rounded-full"
      src="https://api.static.ycymedu.com/src/images/home/customerService.svg"
    ></image>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
  initialX: {
    type: Number,
    default: 0,
  },
  initialY: {
    type: Number,
    default: 0,
  },
})

const systemInfo = uni.getWindowInfo()

const position = ref({ x: props.initialX, y: props.initialY })
const startPosition = ref({ x: 0, y: 0 })
const startTime = ref(0)
const longPressTimer = ref<number | null>(null)
const canDrag = ref(false)
const moveDistance = ref(0)

const startDrag = (event: TouchEvent) => {
  startPosition.value = { x: event.touches[0].clientX, y: event.touches[0].clientY }
  startTime.value = Date.now()
  canDrag.value = false
  moveDistance.value = 0

  // 设置长按定时器，300ms后允许拖动
  longPressTimer.value = setTimeout(() => {
    if (!canDrag.value) {
      canDrag.value = true
    }
  }, 300) as unknown as number
}

const onDrag = (event: TouchEvent) => {
  const deltaX = event.touches[0].clientX - startPosition.value.x
  const deltaY = event.touches[0].clientY - startPosition.value.y

  // 计算移动距离
  moveDistance.value = Math.sqrt(deltaX * deltaX + deltaY * deltaY)

  // 如果移动距离超过阈值，立即允许拖动
  if (moveDistance.value > 10 && !canDrag.value) {
    canDrag.value = true
    if (longPressTimer.value) {
      clearTimeout(longPressTimer.value)
      longPressTimer.value = null
    }
  }

  if (!canDrag.value) return

  position.value = { x: position.value.x - deltaX, y: position.value.y - deltaY }
  startPosition.value = { x: event.touches[0].clientX, y: event.touches[0].clientY }
}

const endDrag = () => {
  // 清除长按定时器
  if (longPressTimer.value) {
    clearTimeout(longPressTimer.value)
    longPressTimer.value = null
  }

  // 如果移动距离小于阈值且触摸时间小于300ms，则触发点击事件
  if (!canDrag.value && moveDistance.value < 10 && Date.now() - startTime.value < 300) {
    handleClick()
    return
  }

  // 如果是拖动结束，处理边界
  if (canDrag.value) {
    const windowWidth = systemInfo.windowWidth
    const windowHeight = systemInfo.windowHeight
    const buttonWidth = 128 // 按钮宽度
    const buttonHeight = 128 // 按钮高度

    if (position.value.x < 0) position.value.x = 0
    if (position.value.y < 0) position.value.y = 0
    if (position.value.x + buttonWidth > windowWidth) position.value.x = windowWidth - buttonWidth
    if (position.value.y + buttonHeight > windowHeight)
      position.value.y = windowHeight - buttonHeight
  }
}

const handleClick = () => {
  uni.navigateTo({
    url: '/pages-sub/customerService/index/index',
  })
}
</script>

<style scoped>
.fab-button {
  position: fixed;
  width: 128rpx;
  height: 128rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
