<template>
  <div>
    <div v-for="question in examQuestions" :key="question.id">
      <el-divider />
      <el-row :gutter="10">
        <el-col :span="1" class="box">
          <el-tag v-if="!analysis">
            {{ examQuestions.indexOf(question) + 1 }}
          </el-tag>
          <el-tag v-else
            :type="submitAnswers.get(question.id) === question.answer.replace(/[;]/gi, '') ? 'success' : 'danger'">
            {{ examQuestions.indexOf(question) + 1 }} "
          </el-tag>
        </el-col>
        <el-col :span="18" class="box1">
          <markdown-text :raw="question.stem + mergeOptions(question.options)" class="text"></markdown-text>
        </el-col>
        <el-col :span="4" class="box">
          <el-card v-if="question.keyPoints" shadow="hover" class="text" style="width:150px;height: :100px;">
            关键词: {{ question.keyPoints }}
          </el-card>
        </el-col>
      </el-row>
      <el-row v-if="analysis && question.type !== 'code'">
        <el-col>
          <markdown-text :raw="question.analysis" style="height: 100%;width: 100%"></markdown-text>
        </el-col>
        <el-col v-if="question.type !== 'short_answer'">
          我的答案：
          <el-tag :type="submitAnswers.get(question.id) ===
              question.answer.replace(/[;]/gi, '')
              ? 'success'
              : 'danger'
            " v-if="submitAnswers.size > 0">
            {{ submitAnswers.get(question.id) }}
          </el-tag>
          正确答案：
          <el-tag type="success">
            {{ question.answer.replace(/[;]/gi, '') }}
          </el-tag>
          <!--  简答题解析即为答案        -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MarkdownText from "@/views/EvalPage/MarkdownText.vue";
export default {
  name: "ExamQuestionsInfo",
  components: { MarkdownText },
  props: {
    examQuestions: {
      type: Array,
      required: true
    },
    analysis: {
      type: Boolean,
      default: false
    },
    examId: null,
  },
  data() {
    return {
      submitAnswers: {},
    };
  },

  methods: {
    mergeOptions(options) {
      if (!options) {
        return "";
      }

      let keys = Object.keys(options);
      let values = Object.values(options);
      let entries = [];

      for (let i = 0; i < keys.length; i++) {
        entries.push(keys[i] + " : " + values[i]);
      }
      return "\n" + entries.join(" ");
    },

    async fetchAnswers() {
      this.$apis.getExamSubmitRecordsByUserId(this.examId).then(_res => {
        let records = _res.data.data.result;
        if (records && records.length > 0) {
          this.submitAnswers = new Map();
          records.forEach((val) => {
            this.submitAnswers.set(
              val.questionId,
              val.submitAnswer === ""
                ? "无"
                : val.submitAnswer === "t"
                  ? "true"
                  : val.submitAnswer === "f"
                    ? "false"
                    : val.submitAnswer.replace(/[;]/gi, "")
            );
          });
        } else {
          this.submitAnswers = new Map();
          this.examQuestions.forEach((val) => {
            this.submitAnswers.set(val.id, "无");
          });
        }
      });
    },
  },

  mounted() {
    if (this.analysis) {
      this.fetchAnswers();
    }
  }
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  display: flex;
  align-items: center;
}

.text {
  font-family: Roboto, sans-serif;
  font-size: 14px;
}
</style>