<template>
  <div class="fab-menu-container">
    <!-- 背景遮罩（点击外部关闭） -->
    <div 
      v-if="expanded"
      class="fab-backdrop"
      @click="handleClose"
    ></div>
    
    <!-- 二级按钮（从下往上排列） -->
    <transition-group
      name="fab-item"
      tag="div"
      class="fab-secondary-buttons"
    >
      <div
        v-for="(action, index) in curActions"
        :key="action.id"
        :style="{ 
          'transition-delay': `${index * 50}ms`,
          'bottom': `${80 + index * 80}px`
        }"
        class="fab-secondary-button"
        @click="handleActionClick(action)"
      >
        <el-badge 
          :value="action.badge" 
          :hidden="action.badge === 0"
          class="fab-badge"
        >
          <el-button
            :type="action.type"
            :circle="true"
            size="medium"
            :icon="action.icon"
            class="fab-action-btn"
          >
          </el-button>
        </el-badge>
        <span class="fab-action-label">{{ action.label }}</span>
      </div>
    </transition-group>
    
    <!-- 主按钮 -->
    <div class="fab-main-button-wrapper">
      <el-button
        :type="expanded ? 'danger' : 'primary'"
        :circle="true"
        size="medium"
        :icon="expanded ? 'el-icon-close' : 'el-icon-menu'"
        class="fab-main-button"
        @click="toggleMenu"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SpeedDialFAB',
  props: {
    actions: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      expanded: false,
      curActions: []
    }
  },
  watch: {
    expanded: {
      handler(newVal) {
        if (newVal) {
          this.curActions = this.actions;
        } else {
          this.curActions = [];
        }
      }
    }
  },
  methods: {
    toggleMenu() {
      this.expanded = !this.expanded
    },
    handleClose() {
      this.expanded = false
    },
    handleActionClick(action) {
      this.expanded = false
      this.$emit('action', action)
    }
  }
}
</script>

<style lang="scss" scoped>
.fab-menu-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}

.fab-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: transparent;
}

.fab-secondary-buttons {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1003;
}

.fab-secondary-button {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 120px;
  margin-bottom: 8px;
  cursor: pointer;
  background-color: #fff;
  box-sizing: content-box;
  padding: 6px 10px;
  border-radius: 36px;
}

.fab-action-btn {
  flex-shrink: 0;
}

.fab-action-label {
  color: #303133;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

.fab-badge {
  flex-shrink: 0;
}

.fab-main-button-wrapper {
  position: relative;
  z-index: 1002;
  width: 120px;
  display: flex;
  justify-content: center;
}

.fab-main-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: fab-attention 1.5s ease-in-out infinite;
}

/* FAB 主按钮吸引注意力动画（增强版） */
@keyframes fab-attention {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  25% {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(64, 158, 255, 0.7), 0 0 20px rgba(64, 158, 255, 0.4);
  }
  50% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  75% {
    transform: scale(1.12);
    box-shadow: 0 8px 28px rgba(64, 158, 255, 0.6), 0 0 15px rgba(64, 158, 255, 0.3);
  }
}

/* 二级按钮进入/离开动画 */
.fab-item-enter-active,
.fab-item-leave-active {
  transition: all 0.3s ease;
}

.fab-item-enter {
  opacity: 0;
  transform: translateY(20px) scale(0.8);
}

.fab-item-leave-to {
  opacity: 0;
  transform: translateY(20px) scale(0.8);
}
</style>