<template>
  <div class="emoji-container">
    <span 
      v-for="emoji in displayEmojis" 
      :key="emoji.id"
      :class="emoji.class"
      :style="emoji.style"
      @animationend="removeEmoji(emoji.id)"
    >{{ emoji.char }}</span>
  </div>
</template>

<script>
export default {
  props: {
    emojis: {
      type: Array,
      default: () => ['🎁', '🎉', '✨', '🎈', '💝']
    },
    density: {
      type: Number,
      default: 0.004 // 控制emoji特效表情密度，值越小越稀疏
    }
  },
  data() {
    return {
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      displayEmojis: [],
      emojiCounter: 0
    }
  },
  mounted() {
    this.generateEmojis()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    getRandomClass() {
      const classes = ['emoji-big', 'emoji-medium', 'emoji-small']
      return classes[Math.floor(Math.random() * classes.length)]
    },
    generateEmojis() {
      const numEmojis = Math.floor(this.screenWidth * this.density)
      
      this.displayEmojis = Array.from({ length: numEmojis }, () => {
        const char = this.emojis[Math.floor(Math.random() * this.emojis.length)]
        const initialRotation = Math.floor(Math.random() * 360)
        const animationDuration = (Math.random() * 2 + 8).toFixed(1) // 8-10秒

        return {
          id: ++this.emojiCounter,
          char,
          class: this.getRandomClass(),
          style: {
            '--start-rotate': `${initialRotation}deg`,
            '--end-rotate': `${initialRotation + 180}deg`, // 修正此处
            animation: `fall ${animationDuration}s linear forwards`,
            left: `${Math.random() * 100}%`, // 改为百分比布局
            opacity: (Math.random() * 0.4 + 0.3).toFixed(2),
            'animation-delay': `${Math.random() * 5}s`
          }
        }
      })
    },
    removeEmoji(id) {
      this.displayEmojis = this.displayEmojis.filter(emoji => emoji.id !== id)
    },
    handleResize: () => {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.displayEmojis = []
      requestAnimationFrame(() => this.generateEmojis())
    }
  }
}
</script>

<style scoped>
.emoji-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

span {
  position: absolute;
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transform: translateY(-150%) rotate(var(--start-rotate));
  will-change: transform, opacity;
}

.emoji-big { font-size: 2.2em; }
.emoji-medium { font-size: 1.6em; }
.emoji-small { font-size: 1em; }
</style>

<style>
@keyframes fall {
  0% {
    transform: 
      translateY(-150%) 
      rotate(var(--start-rotate));
    opacity: var(--opacity);
  }
  100% {
    transform: 
      translateY(calc(100vh + 150px)) 
      rotate(var(--end-rotate));
    opacity: 0;
  }
}
</style>