<template>
  <view
    class="animated-button"
    :class="[buttonClass, { 'scale-animation': isScaling }]"
    @click="handleClick"
  >
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
interface Props {
  // 按钮的基础样式类
  buttonClass?: string
  // 是否禁用
  disabled?: boolean
  // 缩放比例，默认1.1
  scaleRatio?: number
  // 缩放动画持续时间，默认200ms
  scaleDuration?: number
  // 旋转动画持续时间，默认600ms
  rotateDuration?: number
}

interface Emits {
  (e: 'click', event: Event): void
}

const props = withDefaults(defineProps<Props>(), {
  buttonClass: '',
  disabled: false,
  scaleRatio: 1.1,
  scaleDuration: 200,
  rotateDuration: 600
})

const emit = defineEmits<Emits>()

// 动画状态
const isScaling = ref(false)
const isRotating = ref(false)
const rotationCount = ref(0)

// 处理点击事件
function handleClick(event: Event) {
  if (props.disabled) return
  
  // 触发缩放动画
  isScaling.value = true
  setTimeout(() => {
    isScaling.value = false
  }, props.scaleDuration)
  
  // 触发旋转动画
  isRotating.value = true
  rotationCount.value++
  setTimeout(() => {
    isRotating.value = false
  }, props.rotateDuration)
  
  // 触发点击事件
  emit('click', event)
}
</script>

<style scoped lang="scss">
.animated-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
}

.scale-animation {
  transform: scale(1.03);
}

// 禁用状态
.animated-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
</style> 