<template>
  <div class="question-info2" :class="{ new: infoType == 'new' }">
    <div class="card-main">
      <div class="title">{{ infoType === "new" ? "新导入" : "已入库" }}</div>
      <div class="card-table">
        <div class="tr">
          <div class="td">题目</div>
          <div class="td">
            <rich-text
              class="paper-question-body padding-top-6"
              :text-json="quesModel.quesBody"
            ></rich-text>
          </div>
        </div>
        <div
          class="tr"
          v-for="(quesOption, optIndex) in quesModel.quesOptions"
          :key="optIndex"
        >
          <div class="td">{{ optIndex | optionOrderWordFilter }}.</div>
          <div class="td">
            <rich-text :text-json="quesOption.optionBody"></rich-text>
          </div>
        </div>
        <template
          v-if="quesModel.subQuestions && quesModel.subQuestions.length"
        >
          <div
            v-for="(subQuestionModel, qindex) in quesModel.subQuestions"
            :key="`subq-${qindex}`"
          >
            <div class="tr" style="justify-content: flex-end">
              <div class="td">{{ qindex + 1 }}.题目</div>
              <div class="td">
                <rich-text
                  class="paper-question-body"
                  :text-json="subQuestionModel.quesBody"
                ></rich-text>
              </div>
            </div>
            <template
              v-if="
                subQuestionModel.quesOptions &&
                subQuestionModel.quesOptions.length
              "
            >
              <div
                class="tr"
                v-for="(
                  subQuesOption, subIndex
                ) in subQuestionModel.quesOptions"
                :key="subIndex"
              >
                <div class="td"></div>
                <div class="td">
                  <span>{{ subIndex | optionOrderWordFilter }}. </span>
                  <rich-text :text-json="subQuesOption.optionBody"></rich-text>
                </div>
              </div>
            </template>
            <div class="tr" style="justify-content: flex-end">
              <div class="td">答案</div>
              <div class="td">
                <question-answer
                  class="paper-question-body"
                  :data="subQuestionModel"
                ></question-answer>
              </div>
            </div>
          </div>
        </template>
        <div
          class="tr"
          v-if="!quesModel.subQuestions || !quesModel.subQuestions.length"
        >
          <div class="td">答案</div>
          <div class="td">
            <question-answer
              class="paper-question-body"
              :data="quesModel"
            ></question-answer>
          </div>
        </div>
        <div class="tr">
          <div class="td">录入时间</div>
          <div class="td">{{ quesModel.creationTime }}</div>
        </div>
        <div class="tr">
          <div class="td">题型</div>
          <div class="td">{{ quesModel.questionType | questionType }}</div>
        </div>
        <div class="tr">
          <div class="td">预估难度</div>
          <div class="td">{{ quesModel.difficulty || "-" }}</div>
        </div>
        <!-- <div class="tr">
          <div class="td">计算难度</div>
          <div class="td">{{ quesModel.calculateDifficultyDegree || "-" }}</div>
        </div>
        <div class="tr">
          <div class="td">区分度</div>
          <div class="td">{{ quesModel.discrimination || "-" }}</div>
        </div>
        <div class="tr">
          <div class="td">标准差</div>
          <div class="td">{{ quesModel.std || "-" }}</div>
        </div>
        <div class="tr">
          <div class="td">信度</div>
          <div class="td">{{ quesModel.reliability || "-" }}</div>
        </div>
        <div class="tr">
          <div class="td">差异系数</div>
          <div class="td">{{ quesModel.cv || "-" }}</div>
        </div>
        <div class="tr">
          <div class="td">平均分值</div>
          <div class="td">{{ quesModel.calculateAvgScore || "-" }}</div>
        </div> -->
        <div class="tr" v-if="infoType === 'existed'">
          <div class="td">重复率</div>
          <div class="td">{{ quesModel.duplicateRate || "-" }}</div>
        </div>
        <div class="tr">
          <div class="td">试题关联知识点</div>
          <div class="td">
            <el-tag
              v-for="(content, propIndex) in quesModel.quesProperties"
              :key="propIndex"
              type="primary"
              effect="dark"
              style="margin-right: 5px; margin-bottom: 5px"
            >
              {{ 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>
      <div
        v-if="infoType === 'new'"
        style="
          padding: 10px 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        "
      >
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="$emit('delete')"
        ></el-button>
        <el-button
          type="primary"
          plain
          class="maintain"
          @click="$emit('ignore')"
          >跳过</el-button
        >
        <el-button type="primary" @click="$emit('retain')">保留</el-button>
      </div>
      <div v-else style="padding-top: 10px; text-align: right">
        <slot />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import QuestionAnswer from "../../question/components/QuestionAnswer.vue";

export default {
  components: { QuestionAnswer },
  props: {
    question: {
      type: Object,
      default: () => {},
    },
    infoType: {
      type: String,
      default: "new",
    },
  },
  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>
<style lang="scss" scoped>
.question-info2 {
  background: #fff;
  border-radius: 8px;
  padding-top: 4px;
  overflow: hidden;
  &.new {
    background: #6d5ff6;
    .card-main {
      .title {
        color: #6d5ff6;
      }
    }
  }
  .card-main {
    padding: 0 15px;
    background: #fff;
    padding-bottom: 15px;
    .card-table {
      border-top: 1px solid #e5e5e5;
      border-left: 1px solid #e5e5e5;
      .tr {
        display: flex;

        .td {
          width: 122px;
          padding: 10px;
          border-bottom: 1px solid #e5e5e5;
          border-right: 1px solid #e5e5e5;
          :deep(img) {
            max-height: 40px;
            width: auto !important;
          }
          &:first-child {
            background: #f7f7f7;
            display: flex;
            align-items: center;
          }
          &:last-child {
            flex: 1;
          }
        }
      }
    }
    .title {
      height: 52px;
      line-height: 52px;
      font-size: 16px;
      color: #262626;
      font-weight: bold;
    }
  }
}
</style>
