<template>
  <layout-card>
    <layout-table
      v-model:pagination="pagination"
      :data="list"
      @get-data="fnGetData"
    >
      <el-table-column label="题号" prop="QUESTIONNUMBER" width="100" />
      <el-table-column label="试题类型" width="100">
        <template #default="{ row }">
          <el-tag v-if="row.QUESTIONTYPE === '1'" type="success">单选题</el-tag>
          <el-tag v-else-if="row.QUESTIONTYPE === '2'">多选题</el-tag>
          <el-tag v-else-if="row.QUESTIONTYPE === '3'" type="warning">
            判断题
          </el-tag>
          <el-tag v-else-if="row.QUESTIONTYPE === '4'" type="info">
            填空题
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="题干" prop="QUESTIONDRY" />
      <el-table-column label="答案" width="100">
        <template #default="{ row }">
          <div v-if="row.QUESTIONTYPE === '3'">
            <div v-if="row.ANSWER === 'A'">正确</div>
            <div v-if="row.ANSWER === 'B'">错误</div>
          </div>
          <div v-else>{{ row.ANSWER }}</div>
        </template>
      </el-table-column>
      <el-table-column label="答案解析" prop="DESCR" />
    </layout-table>
  </layout-card>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import { getVideoCoursewareExercisesList } from "@/request/training_resource_management.js";
import { useRoute } from "vue-router";

const route = useRoute();
const { COURSEWAREID, COURSEWARETYPE } = route.query;
const { list, pagination, fnGetData } = useListData(
  getVideoCoursewareExercisesList,
  {
    otherParams: { COURSEWAREID, COURSEWARETYPE },
  }
);
</script>

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