<!-- =============================================================================
  企微IT智能服务台 — H5用户端「呼叫坐席」触发按钮
  =============================================================================
  说明：只负责触发弹窗，不直接发 shake 请求。
    点击 → 播放敲桌子动画 → emit('trigger')
    动画：静态呼吸浮动 → 悬浮放大 → 点击时双手交替敲桌子 0.8s
  ============================================================================= -->

<template>
  <button
    class="pound-btn"
    :class="{
      'pound-btn--pounding': isPounding,
      'pound-btn--idle': !isPounding && !disabled && !shaking,
    }"
    :disabled="disabled || shaking || isPounding"
    @click="handleClick"
  >
    <!-- 左拳 -->
    <span class="pound-btn__fist pound-btn__fist--left"
          :class="{ 'pound-btn__fist--active': isPounding }">👊</span>
    <!-- 右拳 -->
    <span class="pound-btn__fist pound-btn__fist--right"
          :class="{ 'pound-btn__fist--active': isPounding }">👊</span>

    <!-- 右上角红点（提示可点击） -->
    <span v-if="!disabled && !shaking" class="pound-btn__dot"></span>
  </button>
</template>

<script setup lang="ts">
/**
 * ShakeButton — 「呼叫坐席」触发按钮
 * 点击只触发弹窗，不直接发请求
 * 动画：双手交替敲桌子效果
 */
import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'trigger'): void
}>()

const props = defineProps<{
  /** 是否禁用按钮 */
  disabled?: boolean
  /** 是否正在呼叫中（防止重复） */
  shaking?: boolean
}>()

/** 是否正在播放敲击动画 */
const isPounding = ref<boolean>(false)

/**
 * 处理点击：播放动画 → 触发弹窗
 */
function handleClick(): void {
  if (props.disabled || props.shaking || isPounding.value) return

  isPounding.value = true
  setTimeout(() => {
    isPounding.value = false
  }, 800)

  emit('trigger')
}
</script>

<style scoped>
/* ==========================================================================
   按钮主体：圆形，橙色渐变，48px
   ========================================================================== */
.pound-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 2px 10px rgba(255, 87, 34, 0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  overflow: hidden;
  flex-shrink: 0;
}

/* 悬浮：放大 + 发光 */
.pound-btn--idle:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 18px rgba(255, 87, 34, 0.55);
}

/* 敲击中：整体震动 */
.pound-btn--pounding {
  animation: desk-shake 0.8s ease-in-out;
  box-shadow: 0 6px 24px rgba(255, 87, 34, 0.7);
}

/* 禁用 */
.pound-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 10px rgba(255, 87, 34, 0.4) !important;
}

/* ==========================================================================
   双拳
   ========================================================================== */
.pound-btn__fists {
  display: flex;
  gap: 2px;
  align-items: center;
}

.pound-btn__fist {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.08s ease;
  will-change: transform;
}

/* 静止时轻微呼吸浮动 */
.pound-btn--idle .pound-btn__fist--left {
  animation: fist-idle-left 2s ease-in-out infinite;
}
.pound-btn--idle .pound-btn__fist--right {
  animation: fist-idle-right 2s ease-in-out 0.3s infinite;
}

/* 敲击时 */
.pound-btn__fist--left.pound-btn__fist--active {
  animation: fist-pound-left 0.8s ease-in-out;
}
.pound-btn__fist--right.pound-btn__fist--active {
  animation: fist-pound-right 0.8s ease-in-out;
}

/* ==========================================================================
   右上角红点
   ========================================================================== */
.pound-btn__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-danger);
  border: 1.5px solid var(--bg-secondary);
}

/* ==========================================================================
   CSS 动画关键帧
   ========================================================================== */

/* 按钮整体水平震动 — 模拟桌子被敲击 */
@keyframes desk-shake {
  0%, 100% { transform: translateX(0); }
  10%  { transform: translateX(-4px); }
  20%  { transform: translateX(4px); }
  30%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  50%  { transform: translateX(-2px); }
  60%  { transform: translateX(2px); }
  70%  { transform: translateX(-1px); }
  80%  { transform: translateX(1px); }
  90%  { transform: translateX(0); }
}

/* 左手拳头敲击 */
@keyframes fist-pound-left {
  0%   { transform: translateY(0) scale(1); }
  5%   { transform: translateY(6px) scale(1.15); }
  10%  { transform: translateY(-2px) scale(0.95); }
  15%  { transform: translateY(0) scale(1); }
  25%  { transform: translateY(0) scale(1); }
  30%  { transform: translateY(6px) scale(1.15); }
  35%  { transform: translateY(-2px) scale(0.95); }
  40%  { transform: translateY(0) scale(1); }
  50%  { transform: translateY(0) scale(1); }
  55%  { transform: translateY(6px) scale(1.15); }
  60%  { transform: translateY(-2px) scale(0.95); }
  65%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

/* 右手拳头敲击（与左手交替） */
@keyframes fist-pound-right {
  0%   { transform: translateY(0) scale(1); }
  12%  { transform: translateY(6px) scale(1.15); }
  18%  { transform: translateY(-2px) scale(0.95); }
  22%  { transform: translateY(0) scale(1); }
  32%  { transform: translateY(0) scale(1); }
  37%  { transform: translateY(6px) scale(1.15); }
  42%  { transform: translateY(-2px) scale(0.95); }
  47%  { transform: translateY(0) scale(1); }
  57%  { transform: translateY(0) scale(1); }
  62%  { transform: translateY(6px) scale(1.15); }
  67%  { transform: translateY(-2px) scale(0.95); }
  72%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

/* 静止时左手呼吸 */
@keyframes fist-idle-left {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* 静止时右手呼吸（错开半周期） */
@keyframes fist-idle-right {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(0); }
}
</style>
