<template>
  <!-- 悬浮按钮 -->
  <view
    class="floating-button"
    :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @click="handleClick"
  >
    <!-- 默认内容 -->
    <slot>
     <view class="consultBtn">
     	<text class="iconfont icon-kefu"></text>
		<text>咨询客服</text>
     </view>
    </slot>
  </view>
</template>

<script>
export default {
  name: 'FloatingButton',
  data() {
    return {
      buttonLeft: 310, // 初始位置
      buttonTop: 200, // 初始位置
      startX: 0,
      startY: 0,
      isDragging: false
    }
  },
  methods: {
    // 触摸开始事件
    handleTouchStart(event) {
      const touch = event.touches[0];
      this.startX = touch.clientX - this.buttonLeft;
      this.startY = touch.clientY - this.buttonTop;
      this.isDragging = false;
    },
    // 触摸移动事件
    handleTouchMove(event) {
      event.preventDefault(); // 阻止默认滚动行为
      const touch = event.touches[0];
      this.buttonLeft = touch.clientX - this.startX;
      this.buttonTop = touch.clientY - this.startY;
      this.isDragging = true;

      // 限制按钮不超出屏幕
      const windowWidth = uni.getSystemInfoSync().windowWidth;
      const windowHeight = uni.getSystemInfoSync().windowHeight;
      const buttonSize = 80; // 按钮大小

      if (this.buttonLeft < 0) this.buttonLeft = 0;
      if (this.buttonLeft > windowWidth - buttonSize) this.buttonLeft = windowWidth - buttonSize;
      if (this.buttonTop < 0) this.buttonTop = 0;
      if (this.buttonTop > windowHeight - buttonSize) this.buttonTop = windowHeight - buttonSize;
    },
    // 触摸结束事件
    handleTouchEnd() {
      if (!this.isDragging) {
        this.handleClick();
      }
    },
    // 点击事件
    handleClick() {
      this.$emit('floatingButton');
    }
  }
}
</script>

<style scoped lang="scss">
.floating-button {
  position: fixed;
  width: 140rpx;
  height: 140rpx;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
  background-color: #007AFF; /* 默认背景色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  .consultBtn{
	   color: #20279B;
	   font-size: 28rpx;
	  // .icon-kefu{
	  // 	  width: 60rpx;
	  // 	  height: 60rpx;
	  // 	  color: #20279B;
	  // }
	  
  }
  
  
}

</style>