<template>
  <div>
    <!-- <audio ref="bgAudio" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Innovation.mp3"/> -->
  </div>
</template>

<script>

import { mapState, } from 'vuex'
export default {
  data() {
    const bgAudio = new Audio()
    const uiClickAudio = new Audio()
    return {
      bgAudio,
      uiClickAudio,
    }
  },
  computed: {
    ...mapState('audio', [
      'play',
      'uiClick',
      'uiClickType',
      'mute', // 静音状态
      'volumeMachine',
      'volumeBg',
      'volumeButton',
    ]),
  },
  watch: {
    play() {
      this.playBgAudio()
    },
    uiClick() {
      const { uiClickType } = this
      switch (uiClickType) {
        case 'ui':
          this.playClickAudio()
          break
        default:
          this.playClickAudio()
          break
      }
    },
    mute(value) {
      if (value) { // 静音
        console.log('静音')
        this.bgAudio.pause()
      } else { // 取消静音
        console.log('取消静音')
        this.bgAudio.play()
      }
    },
    volumeMachine() {},
    volumeBg(value) {
      this.bgAudio.volume = value / 100
    },
    volumeButton(value) {
      this.uiClickAudio.volume = value / 100
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      console.log('初始化音频')
      this.bgAudio.src = 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/Innovation.mp3' // 背景音乐
      this.bgAudio.loop = true
      this.uiClickAudio.src = 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/sound/ui_click.mp3' // 通用ui点击音乐
      this.bgAudio.volume = this.volumeBg / 100
      this.uiClickAudio.volume = this.volumeButton / 100
    },
    playBgAudio() {
      const { mute } = this
      if (mute) { // 如果静音
        return
      }
      this.bgAudio.play()
    },
    // ui点击音效
    playClickAudio() {
      this.uiClickAudio.currentTime = 0
      this.uiClickAudio.play()
    },
    // 设置音量
    setVolume() {},
  },
}
</script>
