<template>
  <layout-card>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="试卷名称">
        {{ data.paperInfo.EXAMNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="" />
      <el-descriptions-item label="试卷总分">
        {{ data.paperInfo.EXAMSCORE }}
      </el-descriptions-item>
      <el-descriptions-item label="合格分数">
        {{ data.paperInfo.PASSSCORE }}
      </el-descriptions-item>
      <el-descriptions-item label="岗位培训类型">
        {{ data.paperInfo.post_type_name }}
      </el-descriptions-item>
      <el-descriptions-item label="行业培训类型">
        {{ data.paperInfo.train_type_name }}
      </el-descriptions-item>
      <el-descriptions-item label="多选题数">
        {{ data.paperInfo.DUOXUANTICOUNT }}
      </el-descriptions-item>
      <el-descriptions-item label="多选分数">
        {{ data.paperInfo.DUOXUANTINUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="单选题数">
        {{ data.paperInfo.DANYUANTICOUNT }}
      </el-descriptions-item>
      <el-descriptions-item label="单选分数">
        {{ data.paperInfo.DANXUANTINUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="判断题数">
        {{ data.paperInfo.PANDUITICOUNT }}
      </el-descriptions-item>
      <el-descriptions-item label="判断分数">
        {{ data.paperInfo.PANDUITINUMBER }}
      </el-descriptions-item>
    </el-descriptions>

    <template v-for="(row, index) in data.questionList" :key="row.QUESTION_ID">
      <div>
        <el-row>
          <el-col :span="24">
            {{ index + 1 }}.
            <el-text v-if="row.QUESTIONTYPE === '1'" type="info">
              (单选题)
            </el-text>
            <el-text v-if="row.QUESTIONTYPE === '2'" type="info">
              (多选题)
            </el-text>
            <el-text v-if="row.QUESTIONTYPE === '3'" type="info">
              (判断题)
            </el-text>
            {{ row.QUESTIONDRY }}
          </el-col>
        </el-row>

        <el-space wrap>
          <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>
        </el-space>
        <div>答案：{{ row.ANSWER }}</div>
      </div>
    </template>
  </layout-card>
</template>

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

const route = useRoute();
const { STAGEEXAMPAPERINPUT_ID } = route.query;

const data = reactive({
  paperInfo: {},
  questionList: [],
});

const fnGetPaperInfo = async () => {
  const respData = await getPaperInfo({ STAGEEXAMPAPERINPUT_ID });
  if (respData) {
    data.paperInfo = respData.pd;
    data.questionList = respData.inputQue;
  }
};
await fnGetPaperInfo();
</script>

<style scoped lang="scss"></style>
