<template>
  <div
    ref="button"
    class="draggable-button"
    id="draggable-button"
    @mousedown="dragButton"
    @touchstart="dragButton"
  >
    <uni-icons @click="goHome" type="home" size="30" color="#fff"></uni-icons>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const button = ref(null);
let startX, startY, posX, posY, mouseMoveTracker, mouseUpTracker;

const goHome = () => {
  console.log(11);
  uni.reLaunch({ url: "/pages/main/index/index" });
};

const dragButton = (event) => {
  // event.preventDefault();

  // 初始化坐标
  startX = event.touches[0]?.clientX - button.value.offsetLeft;
  startY = event.touches[0]?.clientY - button.value.offsetTop;

  // 添加鼠标移动监听
  mouseMoveTracker = (event) => {
    posX = event.touches[0]?.clientX - startX;
    posY = event.touches[0]?.clientY - startY;
    button.value.style.position = "absolute";
    button.value.style.top = `${posY}px`;
    button.value.style.left = `${posX}px`;
  };
  document.addEventListener("touchmove", mouseMoveTracker);

  // 添加鼠标释放监听
  mouseUpTracker = () => {
    document.removeEventListener("touchmove", mouseMoveTracker);
    document.removeEventListener("touchend", mouseUpTracker);
  };
  document.addEventListener("touchend", mouseUpTracker);
};

onMounted(() => {
  if (!button.value) {
    document.body.appendChild(button.value);
  }
});

onBeforeUnmount(() => {
  if (button.value) {
    document.body.removeChild(button.value);
  }
});
</script>

<style>
.draggable-button {
  position: fixed;
  cursor: pointer;
  /* 其他样式 */
  right: 20px;
  top: 45%;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #cdcdcd;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 900000;
}
</style>
