<template>
  <view class="music-player" :class="{'playing': isPlaying}" @click="togglePlay">
    <text :class="['player-icon', isPlaying ? 'rotate' : '']">{{ isPlaying ? '🎵' : '🔇' }}</text>
  </view>
</template>

<script>
import audioManager from '@/utils/audioManager';

export default {
  data() {
    return {
      isPlaying: audioManager.getPlayingStatus()
    };
  },
  mounted() {
    audioManager.init();
    uni.$on('audioStateChanged', this.updateState);
    this.isPlaying = audioManager.getPlayingStatus();
    uni.$on('playBackgroundMusic', () => {
      if (!audioManager.getUserDisabled()) {
        audioManager.play();
      }
    });
  },
  beforeDestroy() {
    uni.$off('audioStateChanged', this.updateState);
  },
  methods: {
    updateState(state) {
      this.isPlaying = state.isPlaying;
    },
    togglePlay() {
      audioManager.togglePlay();
      this.isPlaying = audioManager.getPlayingStatus();
    }
  }
};
</script>

<style lang="scss" scoped>
.music-player {
  position: fixed;
  right: 30rpx;
  bottom: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;

  &:active {
    transform: scale(0.95);
  }

  &.playing {
    background-color: rgba(245, 163, 204, 0.9);
  }
}

.player-icon {
  font-size: 40rpx;
  line-height: 1;

  &.rotate {
    display: inline-block;
    animation: rotate 3s linear infinite;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>