<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',
    ]),
  },
  watch: {
    play() {
      this.playBgAudio()
    },
    uiClick() {
      const { uiClickType } = this
      switch (uiClickType) {
        case 'ui':
          this.playClickAudio()
          break
        default:
          this.playClickAudio()
          break
      }
    },
  },
  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点击音乐
    },
    playBgAudio() {
      this.bgAudio.play()
    },
    // ui点击音效
    playClickAudio() {
      this.uiClickAudio.currentTime = 0
      this.uiClickAudio.play()
    },
  },
}
</script>
