<template>
  <layout-card>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="试卷名称" :span="2">
        {{ data.info.EXAMNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="试卷总分">
        {{ data.info.EXAMSCORE }}
      </el-descriptions-item>
      <el-descriptions-item label="合格分数">
        {{ data.info.PASSSCORE }}
      </el-descriptions-item>
      <el-descriptions-item label="岗位培训类型">
        {{ data.info.post_type_name }}
      </el-descriptions-item>
      <el-descriptions-item label="行业培训类型">
        {{ data.info.train_type_name }}
      </el-descriptions-item>
      <el-descriptions-item label="多选题数">
        {{ data.info.DUOXUANTICOUNT }}
      </el-descriptions-item>
      <el-descriptions-item label="多选分数">
        {{ data.info.DUOXUANTINUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="单选题数">
        {{ data.info.DANYUANTICOUNT }}
      </el-descriptions-item>
      <el-descriptions-item label="单选分数">
        {{ data.info.DANXUANTINUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="判断题数">
        {{ data.info.PANDUITICOUNT }}
      </el-descriptions-item>
      <el-descriptions-item label="判断分数">
        {{ data.info.PANDUITINUMBER }}
      </el-descriptions-item>
    </el-descriptions>
    <div
      v-for="(row, index) in [
        ...data.questionList,
        ...data.questionList,
        ...data.questionList,
      ]"
      :key="row.QUESTION_ID"
      class="item ptb-20"
    >
      <div class="mt-20">
        {{ index + 1 }}.
        <span v-if="row.QUESTIONTYPE === '1'"> (单选题) </span>
        <span v-if="row.QUESTIONTYPE === '2'"> (多选题) </span>
        <span v-if="row.QUESTIONTYPE === '3'"> (判断题) </span>
        {{ row.QUESTIONDRY }}
      </div>
      <div class="mt-10 ml-30">
        <el-radio-group
          v-if="row.QUESTIONTYPE === '1'"
          :disabled="true"
          v-model="row.ANSWER"
        >
          <el-radio label="A">A.{{ row.OPTIONA }}</el-radio>
          <el-radio label="B">B.{{ row.OPTIONB }}</el-radio>
          <el-radio label="C">C.{{ row.OPTIONC }}</el-radio>
          <el-radio label="D">D.{{ row.OPTIOND }}</el-radio>
        </el-radio-group>
        <el-checkbox-group
          v-if="row.QUESTIONTYPE === '2'"
          :disabled="true"
          :model-value="row.ANSWER.split('')"
        >
          <el-checkbox label="A">A.{{ row.OPTIONA }}</el-checkbox>
          <el-checkbox label="B">B.{{ row.OPTIONB }}</el-checkbox>
          <el-checkbox label="C">C.{{ row.OPTIONC }}</el-checkbox>
          <el-checkbox label="D">D.{{ row.OPTIOND }}</el-checkbox>
        </el-checkbox-group>
        <el-radio-group
          v-if="row.QUESTIONTYPE === '3'"
          :disabled="true"
          v-model="row.ANSWER"
        >
          <el-radio label="A">A.{{ row.OPTIONA }}</el-radio>
          <el-radio label="B">B.{{ row.OPTIONB }}</el-radio>
        </el-radio-group>
      </div>
      <div class="mt-10">答案：{{ row.ANSWER }}</div>
    </div>
  </layout-card>
</template>

<script setup>
import { reactive } from "vue";
import { useRoute } from "vue-router";
import { getPaperView } from "@/request/platform_resource_library.js";

const route = useRoute();
const { STAGEEXAMPAPERINPUT_ID } = route.query;
const data = reactive({
  info: {},
  questionList: [],
});
const fnGetData = async () => {
  const resData = await getPaperView({ STAGEEXAMPAPERINPUT_ID });
  if (resData) {
    data.info = resData.pd;
    data.questionList = resData.inputQue;
  }
};
fnGetData();
</script>

<style scoped lang="scss">
.item {
  border-bottom: 1px dashed #ebeef5;
}
</style>
