<template>
  <el-dialog
    custom-class="question-preview-dialog edit-paper"
    :visible.sync="modalIsShow"
    title="试题预览"
    width="1000px"
    top="20px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <div v-if="modalIsShow" class="edit-part">
      <div class="edit-cont">
        <div class="edit-cont-title">
          <rich-text :text-json="question.quesBody"></rich-text>
        </div>
        <div class="edit-cont-body">
          <div
            v-for="(quesOption, optionIndex) in question.quesOptions"
            :key="optionIndex"
            class="paper-option"
          >
            <span>{{ optionIndex | optionOrderWordFilter }}. </span>
            <rich-text :text-json="quesOption.optionBody"></rich-text>
          </div>
          <div v-if="!isNested(question.questionType)" class="paper-answer">
            <span>答案：</span>
            <question-answer :data="question"></question-answer>
          </div>
        </div>
        <div
          v-if="!isNested(question.questionType)"
          class="edit-cont-props"
          style="margin-top: 10px"
        >
          <el-tag
            v-for="(content, propIndex) in question.quesProperties"
            :key="propIndex"
            type="primary"
            effect="dark"
            style="margin-right: 5px; margin-bottom: 5px"
          >
            <!-- {{ content.courseProperty && content.courseProperty.name }}
            <span style="margin: 0 3px">/</span> -->
            {{ content.firstProperty && content.firstProperty.name }}
            <span
              v-if="content.secondProperty && content.secondProperty.name"
              style="margin: 0 3px"
              >/</span
            >
            {{ content.secondProperty && content.secondProperty.name }}
          </el-tag>
        </div>
        <div
          v-if="isNested(question.questionType)"
          class="edit-paper-question-subs"
        >
          <div
            v-for="(subQuestion, subIndex) in question.subQuestions"
            :key="subIndex"
            class="edit-part"
          >
            <div class="edit-cont">
              <div class="edit-cont-title">
                <span>{{ subIndex + 1 }}. </span>
                <rich-text :text-json="subQuestion.quesBody"></rich-text>
              </div>
              <div class="edit-cont-body">
                <template v-if="!isMatchingQuestion(question.questionType)">
                  <div
                    v-for="(
                      subQuesOption, subOptIndex
                    ) in subQuestion.quesOptions"
                    :key="subOptIndex"
                    class="paper-option"
                  >
                    <span>{{ subOptIndex | optionOrderWordFilter }}. </span>
                    <rich-text
                      :text-json="subQuesOption.optionBody"
                    ></rich-text>
                  </div>
                </template>
                <div class="paper-answer">
                  <span>答案：</span>
                  <question-answer :data="subQuestion"></question-answer>
                </div>
              </div>
              <div class="edit-cont-props" style="margin-top: 10px">
                <el-tag
                  v-for="(content, propIndex) in subQuestion.quesProperties"
                  :key="propIndex"
                  type="primary"
                  effect="dark"
                  style="margin-right: 5px; margin-bottom: 5px"
                >
                  <!-- {{ content.courseProperty && content.courseProperty.name }}
                  <span style="margin: 0 3px">/</span> -->
                  {{ content.firstProperty && content.firstProperty.name }}
                  <span
                    v-if="content.secondProperty && content.secondProperty.name"
                    style="margin: 0 3px"
                    >/</span
                  >
                  {{ content.secondProperty && content.secondProperty.name }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer">
      <el-button @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import QuestionAnswer from "./QuestionAnswer.vue";

export default {
  name: "QuestionPreviewDialog",
  components: { QuestionAnswer },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    isNested(questionType) {
      const nestedQuestion = [
        "PARAGRAPH_MATCHING",
        "BANKED_CLOZE",
        "CLOZE",
        "READING_COMPREHENSION",
        "LISTENING_QUESTION",
      ];

      return nestedQuestion.includes(questionType);
    },
    isMatchingQuestion(questionType) {
      const typeQuestion = ["PARAGRAPH_MATCHING", "BANKED_CLOZE"];
      return typeQuestion.includes(questionType);
    },
  },
};
</script>