<template>
  <div
    ref="comp-root"
    class="hotspot-home"
  >
    <audio
      ref="bg-audio"
      class="bg-audio"
      :src="bgAudioUrl"
      loop
      autoplay
    />
    <router-view />
  </div>
</template>

<script>
// import browser from "@/utils/browser";
import quizData from "@/quizData.js"

export default {
  data() {
    return {
      hotspotData: {}, // 热点数据

      bgAudioUrl: "", //背景音频url
      isBgAudioMuted: false,
    }
  },
  computed: {
  },
  watch: {
    isBgAudioMuted: {
      handler(vNew) {
        if (vNew) {
          this.$refs['bg-audio'].pause() // or toggle静音？
        } else {
          this.$refs['bg-audio'].play() // or toggle静音？
        }
      }
    }
  },
  async mounted() {
    await this.getData()
    if (this.hotspotData && this.hotspotData.content) {
      const quizInfo = quizData.find((item) => {
        return item.id === this.hotspotData.content
      })
      this.setQuestionInfo(quizInfo)
      if (quizInfo.questionType === '判断题') {
        this.$router.push({ name: 'QuestionJudge' })
      }
    }
  },
  methods: {
    ...globalMapMutations([
      'setQuestionInfo'
    ]),
    async getData() {
      let url = `https://super.4dage.com/data/${this.$route.query.id}/hot/js/data.js?time=${Math.random()}`
      let result = (await this.$http.get(url)).data
      this.hotspotData = result[this.$route.query.m]
      if (!this.hotspotData) {
        return alert("热点解析错误")
      }
      console.log('热点数据：', this.hotspotData)

      // this.bgAudioUrl = this.hotspotData.backgroundMusic
    },
  }
}
</script>

<style lang="less" scoped>
.hotspot-home {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  > .bg-audio {
    display: none;
  }
}
</style>