<template>
  <div class="question-info-view">
    <div class="question-info-item" v-if="IS_PAPER_MODE">
      <div class="question-info-label">分值</div>
      <div class="question-info-content">{{ score }}</div>
    </div>
    <div class="question-info-item">
      <div class="question-info-label">答案</div>
      <div class="question-info-content">
        <question-answer :data="question"></question-answer>
      </div>
    </div>
    <div
      v-if="!isAnEmptyRichText(question.answerAnalysis)"
      class="question-info-item"
    >
      <div class="question-info-label">解析</div>
      <div class="question-info-content">
        <rich-text :text-json="question.answerAnalysis"></rich-text>
      </div>
    </div>
    <div v-if="question.difficulty" class="question-info-item">
      <div class="question-info-label">难度</div>
      <div class="question-info-content">{{ question.difficulty }}</div>
    </div>
    <div
      v-if="question.quesProperties && question.quesProperties.length"
      class="question-info-item"
    >
      <div class="question-info-label">知识点</div>
      <div class="question-info-content">
        <el-tag
          v-for="(content, propIndex) in question.quesProperties"
          :key="propIndex"
          type="info"
          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" style="margin: 0 3px">/</span>
          {{ content.secondProperty && content.secondProperty.name }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { isAnEmptyRichText } from "@/utils/utils";
import QuestionAnswer from "../QuestionAnswer.vue";

export default {
  name: "QuestionInfoView",
  components: {
    QuestionAnswer,
  },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    IS_PAPER_MODE() {
      return this.question.editMode === "paper";
    },
    score() {
      return !this.question.score && this.question.score !== 0
        ? "-"
        : this.question.score;
    },
  },
  methods: {
    isAnEmptyRichText,
  },
};
</script>
