<template>
  <section class="question-info">
    <el-form :model="quesModel" label-position="left" label-width="80px">
      <el-form-item label="题目">
        <div
          class="paper-question-body padding-top-6"
          v-html="quesModel.quesBody"
        ></div>
      </el-form-item>
      <el-form-item
        v-for="(quesOption, optIndex) in quesModel.quesOptions"
        :key="optIndex"
      >
        <div class="paper-question-option">
          <span>{{ optIndex | optionOrderWordFilter }}. </span>
          <span v-html="quesOption.optionBody"></span>
        </div>
      </el-form-item>

      <el-form-item label="答案">
        <div
          class="paper-question-body padding-top-6"
          v-html="quesModel.quesAnswer"
        ></div>
      </el-form-item>

      <div class="line-seperator"></div>

      <el-form-item label="题型">
        <span>{{ quesModel.questionType | questionType }}</span>
      </el-form-item>
      <div class="box-justify">
        <el-form-item label="预估难度">
          <span>{{ quesModel.difficultyDegree || "-" }}</span>
        </el-form-item>
        <el-form-item label="计算难度" style="width: 120px">
          <span>{{ quesModel.calculateDifficultyDegree || "-" }}</span>
        </el-form-item>
      </div>
      <div class="box-justify">
        <el-form-item label="区分度">
          <span>{{ quesModel.discrimination || "-" }}</span>
        </el-form-item>
        <el-form-item label="标准差" style="width: 120px">
          <span>{{ quesModel.std || "-" }}</span>
        </el-form-item>
      </div>
      <div class="box-justify">
        <el-form-item label="信度">
          <span>{{ quesModel.reliability || "-" }}</span>
        </el-form-item>
        <el-form-item label="差异系数" style="width: 120px">
          <span>{{ quesModel.cv || "-" }}</span>
        </el-form-item>
      </div>
      <div class="box-justify">
        <el-form-item label="平均分值">
          <span>{{ quesModel.calculateAvgScore || "-" }}</span>
        </el-form-item>
        <el-form-item
          v-if="infoType == 'right'"
          label="重复率"
          style="width: 120px"
        >
          <span>{{ quesModel.duplicateRate || "-" }}</span>
        </el-form-item>
      </div>

      <div class="line-seperator"></div>

      <el-form-item label="试题关联属性" label-width="100px">
        <el-tooltip
          v-for="(content, propIndex) in quesModel.quesProperties"
          :key="propIndex"
          placement="top"
        >
          <div slot="content">
            <span v-if="content.firstProperty != null"
              >一级属性：{{ content.firstProperty.name }}({{
                content.firstProperty.code
              }})</span
            ><br />
            <span v-if="content.secondProperty != null"
              >二级属性：{{ content.secondProperty.name }}({{
                content.secondProperty.code
              }})</span
            >
          </div>
          <span>
            <el-tag
              :key="content.id"
              style="margin-right: 5px"
              type="primary"
              effect="dark"
            >
              {{ content.courseProperty.name }}
            </el-tag>
          </span>
        </el-tooltip>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
import { mapState } from "vuex";

export default {
  props: {
    question: {
      type: Object,
      default: () => {},
    },
    infoType: {
      type: String,
      default: "",
    },
  },
  data() {
    return { quesModel: this.question };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
  },
  watch: {
    question: {
      immediate: false,
      handler(val) {
        this.quesModel = val;
      },
    },
  },
  //初始化查询
  created() {},
  methods: {
    isMatchingQuestion(questionType) {
      if (
        questionType == "PARAGRAPH_MATCHING" ||
        questionType == "BANKED_CLOZE"
      ) {
        return true;
      } else {
        return false;
      }
    },
    isNested(questionType) {
      if (
        questionType == "PARAGRAPH_MATCHING" ||
        questionType == "BANKED_CLOZE" ||
        questionType == "CLOZE" ||
        questionType == "READING_COMPREHENSION" ||
        questionType == "LISTENING_QUESTION"
      ) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
