<template>
  <div class="banked-cloze-question nested-question">
    <div class="ep-question-title">
      <rich-text :text-json="question.body"></rich-text>
    </div>
    <div class="ep-question-body">
      <div
        v-for="(option, optionIndex) in question.options"
        :key="optionIndex"
        class="ep-question-option"
      >
        <div class="ep-question-option-check">
          {{ (option.number - 1) | optionOrderWordFilter }}.
        </div>
        <rich-text :text-json="option.body"></rich-text>
      </div>
    </div>
    <div v-if="question.exceptions.length" class="ep-question-exception">
      <p
        class="tips-info tips-error"
        v-for="(cont, index) in question.exceptions"
        :key="index"
      >
        {{ cont }}
      </p>
    </div>
    <el-form ref="modalFormComp" label-width="72px">
      <el-form-item label="答题模式">
        <el-select v-model="matchingMode">
          <el-option
            v-for="item in matchingModes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div
      v-for="subq in question.subQuestions"
      :key="subq.id"
      class="ep-question-subq"
      :id="`question-${subq.id}`"
    >
      <match-question
        ref="MatchQuestion"
        :question="subq"
        :parent-question="question"
      >
      </match-question>
    </div>
  </div>
</template>

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

export default {
  name: "BankedClozeQuestion",
  components: { MatchQuestion },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      matchingMode: 1,
      activeNames: [],
      matchingModes: [
        { label: "单用", value: 1 },
        { label: "复用", value: 2 },
      ],
    };
  },
  computed: {
    IS_BANKED_CLOZE() {
      return this.question.questionType === "BANKED_CLOZE";
    },
  },
  created() {},
  methods: {
    async validate() {
      let errorQuestionIndexs = [];
      for (let i = 0; i < this.$refs.MatchQuestion.length; i++) {
        const compInst = this.$refs.MatchQuestion[i];
        const res = await compInst.validate().catch(() => {});
        if (!res) {
          errorQuestionIndexs.push(i + 1);
        }
      }
      if (errorQuestionIndexs.length) {
        this.$message.error(
          `请完成第${errorQuestionIndexs.join()}小题的编辑！`
        );
        return Promise.reject();
      }

      return true;
    },
    getData() {
      let data = {
        ...this.question,
        quesParam: { matchingMode: this.matchingMode },
        subQuestions: [],
      };
      if (!this.$refs.MatchQuestion) return;
      data.subQuestions = this.$refs.MatchQuestion.map((compInst) =>
        compInst.getData()
      );
      return data;
    },
  },
};
</script>
