<template>
  <layout-card>
    <el-divider content-position="left">试卷基本信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="试卷名称" :span="2">
        {{ info.EXAMNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="合格分数">
        {{ info.PASSSCORE }}
      </el-descriptions-item>
      <el-descriptions-item label="总分数">
        {{ info.EXAMSCORE }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider content-position="left">试卷题目信息</el-divider>
    <div class="items mt-20 p-20">
      <div
        v-for="(item, index) in testPaper"
        :key="item.PAPER_QUESTION_ID"
        class="item ptb-20"
      >
        <div class="mt-10">
          {{ index + 1 }}.
          <span v-if="item.QUESTIONTYPE === '1'"> (单选题) </span>
          <span v-if="item.QUESTIONTYPE === '2'"> (多选题) </span>
          <span v-if="item.QUESTIONTYPE === '3'"> (判断题) </span>
          {{ item.QUESTIONDRY }}
          <span class="ml-10">(题目分值：{{ item.SCORE }})</span>
        </div>
        <div class="mt-10 ml-30">
          <el-radio-group
            v-if="item.QUESTIONTYPE === '1'"
            disabled
            :model-value="item.ANSWER"
          >
            <el-radio label="A">A.{{ item.OPTIONA }}</el-radio>
            <el-radio label="B">B.{{ item.OPTIONB }}</el-radio>
            <el-radio label="C">C.{{ item.OPTIONC }}</el-radio>
            <el-radio label="D">D.{{ item.OPTIOND }}</el-radio>
          </el-radio-group>
          <el-checkbox-group
            v-if="item.QUESTIONTYPE === '2'"
            disabled
            :model-value="item.ANSWER?.split('')"
          >
            <el-checkbox label="A">A.{{ item.OPTIONA }}</el-checkbox>
            <el-checkbox label="B">B.{{ item.OPTIONB }}</el-checkbox>
            <el-checkbox label="C">C.{{ item.OPTIONC }}</el-checkbox>
            <el-checkbox label="D">D.{{ item.OPTIOND }}</el-checkbox>
          </el-checkbox-group>
          <el-radio-group
            v-if="item.QUESTIONTYPE === '3'"
            disabled
            :model-value="item.ANSWER"
          >
            <el-radio label="A">A.{{ item.OPTIONA }}</el-radio>
            <el-radio label="B">B.{{ item.OPTIONB }}</el-radio>
          </el-radio-group>
        </div>
        <div class="mt-10">答案：{{ item.ANSWER }}</div>
        <div class="mt-10">答案解析：{{ item.DESCR }}</div>
        <div class="mt-10">关联课件名称：{{ item.COURSEWARENAME }}</div>
      </div>
    </div>
  </layout-card>
</template>

<script setup>
import { ref } from "vue";
import {
  getExamPaperManagementTestQuestions,
  getExamPaperManagementView,
} from "@/request/training_resource_management.js";
import { useRoute } from "vue-router";

const route = useRoute();
const { STAGEEXAMPAPERINPUT_ID } = route.query;
const info = ref({});
const testPaper = ref([]);
const fnGetData = async () => {
  const { pd } = await getExamPaperManagementView({
    STAGEEXAMPAPERINPUT_ID,
  });
  info.value = pd;
  const { varList } = await getExamPaperManagementTestQuestions({
    STAGEEXAMPAPERINPUT_ID,
  });
  testPaper.value = varList;
};
fnGetData();
</script>

<style scoped lang="scss">
.items {
  border: 1px solid var(--el-border-color);

  .item {
    border-bottom: 1px dashed #ebeef5;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
