// 预览混入
import AudioPlay from '@/views/exercise_questions/create/components/common/AudioPlay.vue';
import DOMPurify from 'dompurify';

import { isEnable } from '@/views/exercise_questions/data/common';

const PreviewMixin = {
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  components: {
    AudioPlay,
  },
  data() {
    return {
      isEnable,
      answer: { answer_list: [] }, // 答案
      isJudgingRightWrong: false, // 是否判断对错
      isShowRightAnswer: false, // 是否显示正确答案
      disabled: false, // 是否禁用
    };
  },
  watch: {
    answer: {
      handler() {
        this.$emit('change', this.answer);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /**
     * 获取答案
     * @returns {Array} 答案
     */
    getAnswer() {
      return this.answer;
    },
    /**
     * 显示答案
     * @param {Boolean} isJudgingRightWrong 是否判断对错
     * @param {Boolean} isShowRightAnswer 是否显示正确答案
     * @param {Object} userAnswer 用户答案
     * @param {Boolean} disabled 是否禁用
     */
    showAnswer(isJudgingRightWrong, isShowRightAnswer, userAnswer, disabled) {
      this.isJudgingRightWrong = isJudgingRightWrong;
      this.isShowRightAnswer = isShowRightAnswer;
      this.disabled = disabled;
      if (userAnswer) this.answer = userAnswer;
    },
    /**
     * 题号是否有括号，如果没有则再判断是否有中文数字，如果有则加上 '、' 没有加上 '.'
     * @param {string} question_number 题目序号
     * @returns {string} 题目序号
     */
    questionNumberEndIsBracket(question_number) {
      if (question_number.length <= 0) return '';
      return `${question_number}${/[()（）]/.test(question_number) ? '' : /[一二三四五六七八九十百]/.test(question_number) ? '、' : '.'}`;
    },
    /**
     * 过滤 html，防止 xss 攻击
     * @param {string} html 需要过滤的html
     * @returns {string} 过滤后的html
     */
    sanitizeHTML(html) {
      return DOMPurify.sanitize(html);
    },
  },
};

export default PreviewMixin;