<template>
  <div
    v-if="questionDetail"
    :key="examQuestion.questionId"
    class="question-body"
  >
    <div v-html="questionDetail.text"></div>
    <!-- <div v-html="questionDetail.audio"></div> -->
    <div
      v-for="{ src, name } in questionDetail.audio"
      :key="name"
      class="audio-div"
    >
      <div style="position: relative; margin-bottom: 2px;" class="audio-div">
        <QuestionAudio
          key="src"
          :name="name"
          :src="src"
          :play-count="
            examQuestion.limitedPlayTimes ? getAudioPlayedTimes(name) : 1
          "
          @played="played(name)"
        />
        <span v-if="examQuestion.limitedPlayTimes">
          （剩余播放次数：{{ getAudioPlayedTimes(name) }}）
        </span>
        <div
          v-if="audioInPlay.has(name)"
          style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;"
        ></div>
      </div>
    </div>
  </div>

  <div v-else>获取试题中...</div>
</template>

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

export default {
  name: "QuestionBody",
  components: {
    QuestionAudio,
  },
  props: {
    questionBody: { type: String, default: "" },
    examQuestion: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      questionDetail: null,
      audioPlayTimes: null,
      audioInPlay: new Set(),
    };
  },
  computed: {
    ...mapState(["allAudioPlayTimes"]),
  },
  watch: {
    questionBody() {
      this.parseQuestion();
    },
    examQuestion() {
      this.parseQuestion();
    },
  },
  mounted() {
    this.parseQuestion();
  },
  methods: {
    ...mapMutations(["updateExamQuestion", "updateQuestionAudioPlayTimes"]),
    async parseQuestion() {
      let question = {};
      if (this.questionBody.includes("question-audio")) {
        question.text = this.questionBody.replace(
          /<a.*?question-audio.*?\/a>/g,
          ""
        );
        // 测试 v-html中含有directive是否生效。结论：不生效

        question.audio = [];
        let re;
        if (/<a.*?question-audio.*?\/a>/.test(this.questionBody)) {
          re = /name="([^"]*)".*?question-audio.*?url="([^"]*)"/g;
        }
        let array1;
        while ((array1 = re.exec(this.questionBody)) !== null) {
          question.audio.push({ name: array1[1], src: array1[2] });
        }
      } else {
        question.text = this.questionBody;
        question.audio = [];
      }
      this.questionDetail = question;
    },
    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>

<style>
.audio-div {
  display: flex;
  align-items: center;
}
/* .question-body audio::-webkit-media-controls-timeline,
.question-body audio::-webkit-media-controls-timeline-container {
  display: none;
} */
</style>
