<template>
  <div>
    <template v-for="(item, index) in node.childNodes">
      <template v-if="item.className === 'audio-placeholder'">
        <div
          :key="index"
          style="
            position: relative;
            font-size: 18px;
            word-break: break-word;
            background-color: lightblue;
            border-radius: 4px;
            padding-left: 2px;
            padding-top: 2px;
          "
          class="audio-div"
        >
          <QuestionAudio
            :name="item.getAttribute('data-name')"
            :src="item.getAttribute('data-src')"
            :play-count="
              examQuestion.limitedPlayTimes
                ? getAudioPlayedTimes(item.getAttribute('data-name'))
                : 1
            "
            @played="played(item.getAttribute('data-name'))"
          />
          <span v-if="examQuestion.limitedPlayTimes">
            （<span style="color: red">请点击播放</span
            >按钮听音作答。已播次数：<span style="color: red">{{
              examQuestion.limitedPlayTimes -
              getAudioPlayedTimes(item.getAttribute("data-name"))
            }}</span
            >，剩余播放次数：<span style="color: red">{{
              getAudioPlayedTimes(item.getAttribute("data-name"))
            }}</span
            >）
          </span>
          <div
            v-if="audioInPlay.has(item.getAttribute('data-name'))"
            style="position: absolute; top: 0; right: 0; bottom: 0; left: 0"
          ></div>
        </div>
      </template>
      <!-- <template v-else-if="item.nodeType == 3" v-text="item.nodeValue" /> -->
      <template v-else-if="item.nodeType == 3">
        {{ item.nodeValue }}
      </template>
      <template
        v-else-if="
          item.childNodes &&
          item.querySelector &&
          item.querySelector('.audio-placeholder')
        "
      >
        <QuestionContainer
          :key="index"
          :node="item"
          :exam-question="examQuestion"
          :audio-in-play="audioInPlay"
        />
      </template>

      <!-- <template v-else v-html="item.outerHTML"></template> -->
      <span v-else :key="index" v-html="item.outerHTML"></span>
      <!-- <p v-else v-html="item.outerHTML"></p> -->
      <!-- <template v-else>{{ item.outerHTML }}</template> -->
    </template>
  </div>
</template>

<script>
import QuestionAudio from "./QuestionAudio";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");

export default {
  name: "QuestionContainer",
  components: {
    QuestionAudio,
  },
  props: {
    node: { type: HTMLElement, default: () => {} },
    examQuestion: { type: Object, default: () => {} },
    audioInPlay: { type: Set, default: () => new Set() },
  },
  computed: {
    ...mapState(["allAudioPlayTimes"]),
  },
  methods: {
    ...mapMutations(["updateExamQuestion", "updateQuestionAudioPlayTimes"]),
    played(name) {
      if (!this.examQuestion.limitedPlayTimes) {
        // 如果没有设置音频播放次数，可无限播放
        return false;
      }
      console.log("开始播放");

      // 正在播放中
      this.updateQuestionAudioPlayTimes(name);
    },
    getAudioPlayedTimes(name) {
      return Math.max(
        this.examQuestion.limitedPlayTimes -
          (this.allAudioPlayTimes.find((a) => a.name === name) || { times: 0 })
            .times,
        0
      );
    },
  },
};
</script>
