<template>
  <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
  >
    <div class="box-justify" slot="title">
      <h2>试题审核</h2>
      <div>
        <el-button icon="el-icon-back" @click="cancel">返回</el-button>
      </div>
    </div>
    <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-form
        ref="modalFormComp"
        :model="modalForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="审核意见" prop="auditRemark">
          <el-input
            v-model="modalForm.auditRemark"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="box-justify">
        <div>
          <el-button type="primary" :disabled="prevDisabled" @click="toPrev"
            >上一题</el-button
          >
          <el-button type="primary" :disabled="nextDisabled" @click="toNext"
            >下一题</el-button
          >
        </div>
        <div>
          <el-button
            plain
            class="maintain"
            type="danger"
            @click="submit('NOT_PASS', question.id)"
            >不通过</el-button
          >
          <el-button type="primary" @click="submit('PASS', question.id)"
            >通过</el-button
          >
        </div>
      </div>
      <!-- <el-button @click="cancel">关闭</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import QuestionAnswer from "./QuestionAnswer.vue";
import { auditQuestionApi } from "../api";
import { cloneDeep } from "lodash";
export default {
  name: "QuestionPreviewLoopDialog",
  components: { QuestionAnswer },
  computed: {
    prevDisabled() {
      let id = this.question.id;
      return this.privateTableData.findIndex((item) => item.id == id) == 0;
    },
    nextDisabled() {
      let id = this.question.id;
      return (
        this.privateTableData.findIndex((item) => item.id == id) ==
        this.privateTableData.length - 1
      );
    },
  },
  props: {
    propQuestion: {
      type: Object,
      default() {
        return {};
      },
    },
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      question: {},
      modalForm: {
        auditRemark: "",
        auditResult: "",
      },
      rules: {
        auditRemark: [
          {
            validator: (rule, value, callback) => {
              console.log(value, this.modalForm.auditResult);
              if (this.modalForm.auditResult === "NOT_PASS" && !value) {
                return callback(new Error(`请输入审核意见`));
              }

              callback();
            },
            trigger: "change",
          },
        ],
      },
      privateTableData: [],
    };
  },
  watch: {
    propQuestion(val) {
      this.question = val;
    },
    modalIsShow(val) {
      val && (this.modalForm.auditRemark = "");
    },
    tableData(val) {
      this.privateTableData = cloneDeep(val);
    },
  },
  methods: {
    toPrev() {
      let index = this.privateTableData.findIndex(
        (item) => item.id == this.question.id
      );
      if (index != -1) {
        this.question = this.privateTableData[index - 1];
      }
    },
    toNext() {
      let index = this.privateTableData.findIndex(
        (item) => item.id == this.question.id
      );
      if (index != -1) {
        this.question = this.privateTableData[index + 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);
    },
    async submit(type, id) {
      this.modalForm.auditResult = type;
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      let datas = { ...this.modalForm };
      datas.questionIds = [id].join();
      const res = await auditQuestionApi(datas).catch(() => {});
      if (!res) return;

      this.$message.success("操作成功！");
      this.$emit("update");
      // this.cancel();
      this.$bus.emit("updateBadge");

      let index = this.privateTableData.findIndex(
        (item) => item.id == this.question.id
      );
      if (index == -1) {
        if (!this.privateTableData.length) {
          this.question = {};
          this.cancel();
        } else {
          this.question = this.privateTableData[0];
        }
      } else {
        if (index === this.privateTableData.length - 1) {
          this.question = {};
          this.cancel();
        } else {
          this.privateTableData.splice(index, 1);
          this.question = this.privateTableData[index];
        }
      }
      this.modalForm.auditRemark = "";
      this.$nextTick(() => {
        this.$refs.modalFormComp.clearValidate();
      });
    },
  },
};
</script>
