<template>
  <view class="music-control" @click.stop="toggleMusic">
    <text class="music-text" :class="{ 'rotating': isPlaying }">
      {{ isPlaying ? '🎵' : '🔇' }}
    </text>
  </view>
</template>

<script>
export default {
  name: 'MusicControl',
  data() {
    return {
      isPlaying: false
    }
  },
  mounted() {
	  console.log('初始化')
    // 组件挂载时同步音乐状态
    this.syncMusicState();
    
    // 添加定时器，每秒同步一次状态
    this.timer = setInterval(() => {
      this.syncMusicState();
    }, 1000);
  },
  beforeUnmount() {
    // 组件卸载前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    syncMusicState() {
      const app = getApp();
      if (app && app.globalData) {
        this.isPlaying = app.globalData.isMusicPlaying;
      }
    },
    
    toggleMusic() {
      const app = getApp();
      if (!app || !app.globalData || !app.globalData.bgMusic) {
        console.error('背景音乐未初始化');
        return;
      }
      
      const bgMusic = app.globalData.bgMusic;
	  
	  console.log(bgMusic)
      
      // 直接基于当前组件的状态切换
      if (this.isPlaying) {
        bgMusic.pause();
      } else {
        bgMusic.play();
      }
    }
  }
}
</script>

<style scoped>
.music-control {
  position: fixed;
  right: 30rpx;
  bottom: 210rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.music-text {
  font-size: 40rpx;
}

.rotating {
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
