<template>
  <view 
    class="float-button" 
    :class="{ 'is-show': visible }"
    :style="{
      right: `${right}rpx`,
      bottom: `${bottom}rpx`,
      width: `${size}rpx`,
      height: `${size}rpx`,
      'background-color': backgroundColor,
      'box-shadow': boxShadow
    }"
    @click="handleClick"
  >
    <!-- 图标模式 -->
    <view v-if="icon" class="float-button__icon">
      <image class="float-button__icon" src="../static/image/plus.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
        
      </image>
    </view>
    
    <!-- 文字模式 -->
    <view v-else class="float-button__text">
      {{ text }}
    </view>
    
    <!-- 徽标提示 -->
    <view v-if="badge" class="float-button__badge">{{ badge }}</view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  // 是否显示按钮
  visible: {
    type: Boolean,
    default: true
  },
  // 按钮大小(rpx)
  size: {
    type: [Number, String],
    default: 120
  },
  // 右侧距离(rpx)
  right: {
    type: [Number, String],
    default: 60
  },
  // 底部距离(rpx)
  bottom: {
    type: [Number, String],
    default: 60
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    default: '#007aff'
  },
  // 图标名称(使用iconfont类名)
  icon: {
    type: Boolean,
    default: ''
  },
  // 按钮文字
  text: {
    type: String,
    default: ''
  },
  // 阴影样式
  boxShadow: {
    type: String,
    default: '0 4rpx 12rpx rgba(0, 0, 0, 0.15)'
  },
  // 徽标数字
  badge: {
    type: [String, Number],
    default: ''
  }
});

const emit = defineEmits(['click']);

// 点击事件处理
const handleClick = (event) => {
  emit('click', event);
};
</script>

<style scoped>
.float-button {
  position: fixed; /* 相对于窗口固定定位 */
  z-index: 999; /* 确保悬浮按钮在最上层 */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* 圆形按钮 */
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* 徽标提示样式 */
.float-button__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 20rpx;
  border-radius: 16rpx;
  padding: 0 6rpx;
  transform: translate(20%, -20%);
}

/* 图标样式 */
.float-button__icon {
  height: 60rpx;
  width: 60rpx;
  color: #ffffff;
}

/* 文字样式 */
.float-button__text {
  font-size: 24rpx;
  color: #ffffff;
  white-space: nowrap;
}

/* 显示/隐藏动画 */
.float-button.is-show {
  opacity: 1;
  transform: translateY(0);
}
</style>