<template>
  <div>
    <el-dialog
      custom-class="question-preview-dialog edit-paper question-edit-log-dialog"
      :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 icon="el-icon-back" @click="cancel">返回</el-button>
        </div>
      </div>

      <div class="log-container">
        <div class="log-question">
          <div
            v-if="question.version"
            class="edit-part"
            :key="question.version"
          >
            <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>
        <div class="log-history">
          <div class="log-history-table">
            <el-table
              element-loading-text="加载中"
              :data="logList"
              :row-class-name="rowClassHandle"
              @row-click="selectQuestion"
            >
              <el-table-column
                label="修改时间"
                width="160"
                prop="versionCreationTime"
              >
              </el-table-column>
              <el-table-column label="修改人" prop="versionCreatorLoginName">
                <template slot-scope="scope">
                  {{ scope.row.versionCreatorRealName }}（{{
                    scope.row.versionCreatorLoginName
                  }}）
                </template>
              </el-table-column>
            </el-table>
            <div class="part-page">
              <el-pagination
                layout="prev, pager, next"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                @current-change="toPage"
                @size-change="handleSizeChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import { questionEditLogsApi } from "../api";
import QuestionAnswer from "./QuestionAnswer.vue";

export default {
  name: "QuestionEditLogDialog",
  components: { QuestionAnswer },
  props: {
    questionId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      modalIsShow: false,
      question: {},
      logList: [],
      curLogVersion: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    async openHandle() {
      await this.toPage(1);
      if (this.logList.length) this.selectQuestion(this.logList[0]);
    },
    async toPage(page) {
      this.currentPage = page;
      await this.getList();
    },
    async getList() {
      const res = await questionEditLogsApi({
        questionId: this.questionId,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      });

      this.logList = res.data.content;
      this.total = res.data.totalElements;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.toPage(1);
    },
    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);
    },
    rowClassHandle({ row }) {
      return row.version === this.curLogVersion ? "is-active" : "";
    },
    selectQuestion(row) {
      this.curLogVersion = row.version;
      this.question = row;
    },
  },
};
</script>
