<template>
  <div>
    <el-dialog
      custom-class="question-preview-dialog edit-paper"
      :visible.sync="modalIsShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @open="openHandle"
    >
      <div class="box-justify" slot="title">
        <h2>试题预览</h2>
        <div>
          <el-button
            v-if="showLog"
            icon="el-icon-document"
            type="primary"
            @click="toViewLog"
            >修改记录</el-button
          >
          <el-button icon="el-icon-back" @click="cancel">返回</el-button>
        </div>
      </div>
      <div class="edit-part" :key="question.id">
        <div class="edit-cont">
          <div class="edit-cont-title">
            <rich-text :text-json="question.quesBody"></rich-text>
          </div>
          <div class="edit-cont-body">
            <template v-if="question.quesOptions">
              <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>
            </template>
            <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) && question.quesProperties"
            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
                  v-if="subQuestion.quesProperties"
                  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 class="text-center" slot="footer">
        <template v-if="showSwitch">
          <el-button type="primary" :disabled="loading" @click="toPrev"
            >上一题</el-button
          >
          <el-button type="primary" :disabled="loading" @click="toNext"
            >下一题</el-button
          >
        </template>

        <el-button v-if="showEdit" type="primary" @click="toEdit"
          >编辑</el-button
        >
      </div>
    </el-dialog>

    <!-- QuestionEditLogDialog -->
    <question-edit-log-dialog
      v-if="showLog"
      ref="QuestionEditLogDialog"
      :question-id="this.question.id"
    ></question-edit-log-dialog>
  </div>
</template>

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

export default {
  name: "QuestionPreviewDialog",
  components: { QuestionAnswer, QuestionEditLogDialog },
  props: {
    data: {
      type: Object,
      default: null,
    },
    showEdit: {
      type: Boolean,
      default: false,
    },
    showSwitch: {
      type: Boolean,
      default: false,
    },
    showLog: {
      type: Boolean,
      default: false,
    },
    listInfo: {
      type: Object,
      default: null,
      // {dataList,curIndex,pageNumber,totalPages}
    },
    fetchPage: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      modalIsShow: false,
      question: {},
      curIndex: 0,
      loading: false,
    };
  },
  watch: {
    data(val) {
      this.question = val;
    },
  },
  methods: {
    openHandle() {
      if (this.data) {
        this.question = this.data;
        return;
      }

      if (!this.listInfo) return;
      this.curIndex = this.listInfo.curIndex;
      this.selectQuestion();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toEdit() {
      this.$emit("on-edit", this.question);
    },
    toViewLog() {
      this.$refs.QuestionEditLogDialog.open();
    },
    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);
    },
    toPrev() {
      if (this.listInfo && this.fetchPage) {
        this.prevQuestion();
        return;
      }

      this.$emit("on-prev");
    },
    toNext() {
      if (this.listInfo && this.fetchPage) {
        this.nextQuestion();
        return;
      }

      this.$emit("on-next");
    },
    // question view
    selectQuestion() {
      this.question = this.listInfo.dataList[this.curIndex];
    },
    async prevQuestion() {
      const { pageNumber } = this.listInfo;
      if (this.curIndex <= 0) {
        if (pageNumber <= 1) {
          this.$message.error("已经是第一道试题！");
          return;
        }
        this.loading = true;
        let result = true;
        await this.fetchPage(pageNumber - 1).catch(() => {
          result = false;
        });
        this.loading = false;
        if (!result) return;
        this.$nextTick(() => {
          this.curIndex = this.listInfo.dataList.length - 1;
          this.selectQuestion();
        });
      } else {
        this.curIndex--;
        this.selectQuestion();
      }
    },
    async nextQuestion() {
      const { pageNumber, totalPages, dataList } = this.listInfo;
      if (this.curIndex >= dataList.length - 1) {
        if (pageNumber >= totalPages) {
          this.$message.error("已经是最后一道试题！");
          return;
        }
        this.loading = true;
        let result = true;
        await this.fetchPage(pageNumber + 1).catch(() => {
          result = false;
        });
        this.loading = false;
        if (!result) return;

        this.$nextTick(() => {
          this.curIndex = 0;
          this.selectQuestion();
        });
      } else {
        this.curIndex++;
        this.selectQuestion();
      }
    },
  },
};
</script>
