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

<script>
export default {
  name: 'FloatingButton',
  data() {
    return {
      buttonRight: 10, // 初始位置，单位rpx
      buttonBottom: 200, // 初始位置，单位rpx
      startX: 0,
      startY: 0,
      isDragging: false,
      windowWidth: 0,
      windowHeight: 0,
      buttonWidth: 140, // 按钮宽度，单位rpx
      buttonHeight: 140 // 按钮高度，单位rpx
    }
  },
  mounted() {
    this.updateWindowSize();
    // 监听窗口变化
    uni.onWindowResize(() => {
      this.updateWindowSize();
    });
  },
  methods: {
    // 更新窗口尺寸
    updateWindowSize() {
      const systemInfo = uni.getSystemInfoSync();
      this.windowWidth = systemInfo.windowWidth;
      this.windowHeight = systemInfo.windowHeight;
    },
    // 触摸开始事件
    handleTouchStart(event) {
      const touch = event.touches[0];
      // 记录触摸点相对于按钮右下角的偏移量
      this.startX = touch.clientX - (this.windowWidth - this.rpxToPx(this.buttonRight));
      this.startY = touch.clientY - (this.windowHeight - this.rpxToPx(this.buttonBottom));
      this.isDragging = false;
    },
    // 触摸移动事件
    handleTouchMove(event) {
      event.preventDefault(); // 阻止默认滚动行为
      const touch = event.touches[0];
      
      // 计算新的right和bottom值（像素单位）
      let newRight = this.windowWidth - touch.clientX + this.startX;
      let newBottom = this.windowHeight - touch.clientY + this.startY;
      
      // 转换为rpx单位
      this.buttonRight = this.pxToRpx(newRight);
      this.buttonBottom = this.pxToRpx(newBottom);
      
      this.isDragging = true;

      // 限制按钮不超出屏幕（rpx单位）
      const maxRight = this.windowWidth - this.rpxToPx(this.buttonWidth);
      const maxBottom = this.windowHeight - this.rpxToPx(this.buttonHeight);
      
      if (newRight < 0) {
        this.buttonRight = this.pxToRpx(0);
      } else if (newRight > maxRight) {
        this.buttonRight = this.pxToRpx(maxRight);
      }
      
      if (newBottom < 0) {
        this.buttonBottom = this.pxToRpx(0);
      } else if (newBottom > maxBottom) {
        this.buttonBottom = this.pxToRpx(maxBottom);
      }
    },
    // 触摸结束事件
    handleTouchEnd() {
      if (!this.isDragging) {
        this.handleClick();
      }
    },
    // 点击事件
    handleClick() {
      // 现在还没转化成小程序，暂时放在这
      // #ifdef MP-WEIXIN
      uni.openCustomerServiceChat({
        extInfo: {
          url: 'https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e'
        },
        corpId: 'ww43cac1cf9dd6a3d0', // 客服会话按钮打开后，在微信客服会话按钮处理的事件类型
        showMessageCard: true,
        sendMessageTitle: (uni.getStorageSync('hoservice_mobileNo')?(uni.getStorageSync('hoservice_mobileNo')+"，") :"" ) + "进入个人中心-->咨询客服",
        sendMessagePath: `/pages/index/mySelf.html`,
        //sendMessageImg: cardItem.value['list'][0]['itemImg']
      });
      // #endif
      // #ifndef MP-WEIXIN
      window.open('https://work.weixin.qq.com/kfid/kfc08c55f4170e7fc9e')
      // #endif
    },
    // rpx转px
    rpxToPx(rpx) {
      return rpx / 750 * this.windowWidth;
    },
    // px转rpx
    pxToRpx(px) {
      return px * 750 / this.windowWidth;
    }
  }
}
</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;
  .consultBtn{
    display: flex;
    align-items: center;
    flex-direction: column;
     color: #20279B;
     font-size: 28rpx;
    .icon-kefu{
        font-size: 60rpx;
    }
  }
}
</style>