<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() {
    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

    const answerRecord = await globalApi.getAnswerRecord()

    let recordOnThisHotspot = []
    if (answerRecord?.length) {
      recordOnThisHotspot = answerRecord.filter((item) => {
        return item.num.split('.')[0] === this.hotspotData.content
      })
    }

    if (recordOnThisHotspot.length === 0 ) { //没答过这个点位的题
      const newId = globalUtils.getNextQuestionId(this.hotspotData.content)
      const quizInfo = quizData.find((item) => {
        return item.id === newId
      })
      this.setQuestionInfo(quizInfo)
      if (browser.mobile) {
        this.$router.push({ name: 'QuestionViewMobile' })
      } else {
        this.$router.push({ name: 'QuestionView' })
      }
    } else { //答过这个点位的题，可能要找到最近答的那道题，恢复现场
      const latestRecord = recordOnThisHotspot.reduce((accu, curr) => {
        if (new Date(accu.updateTime).getTime() <= new Date(curr.updateTime).getTime()) {
          return curr
        } else {
          return accu
        }
      })
      if (!globalUtils.getRemainingQuestionNumber(latestRecord.num)) { // 上次答的是最后一题，重新回到第一题
        const newId = globalUtils.getNextQuestionId(this.hotspotData.content)
        const quizInfo = quizData.find((item) => {
          return item.id === newId
        })
        this.setQuestionInfo(quizInfo)
        if (browser.mobile) {
          this.$router.push({ name: 'QuestionViewMobile' })
        } else {
          this.$router.push({ name: 'QuestionView' })
        }
      } else {
        const quizInfo = quizData.find((item) => {
          return item.id === latestRecord.num
        })

        this.setAnswerRecord(latestRecord)
        this.setIsSubmitted(true)
        this.setQuestionInfo(quizInfo)
        if (browser.mobile) {
          this.$router.push({ name: 'QuestionViewMobile' })
        } else {
          this.$router.push({ name: 'QuestionView' })
        }
      }
    }
  },
  methods: {
    ...globalMapMutations([
      'setQuestionInfo',
      'setAnswerRecord',
      'setIsSubmitted',
    ]),
  }
}
</script>

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