<template>
  <div class="container">
    <h3>{{ info.TestPaperName }}</h3>
    <div class="header-opts">
        <el-button type="text">查看回放</el-button>
    </div>
    <div class="questions">
      <el-card class="box-card" v-for="item in list" :key="item.id">
        <h4>
          <el-tag size="mini" type="success" effect="dark">{{
            item.QuestionClassName
          }}</el-tag>
          【{{ item.subjectName }}】{{ item.subject }}
        </h4>
        <ul v-if="item.subjectType == 1">
          <li v-for="i in item.subjectContentObj" :key="i.option">
            <el-tag size="mini" type="primary" effect="dark">{{
              i.option
            }}</el-tag>
            {{ i.optionContent }}
          </li>
        </ul>
        <p v-if="item.subjectType == 1">Ta的答案:{{ item.answer }}</p>
        <p v-if="item.subjectType == 1">正确答案:B</p>
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 80%;
  max-width: 1200px;
  min-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header-opts{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
  }
  .questions {
    width: 100%;
  }
  li {
    list-style: none;
    margin-bottom: 10px;
  }
}
</style>
<script>
import { SelectQuestionBankListForHistoryId } from "@/api/HistoryAnswer";
export default {
  data() {
    return {
      info: {},
      list: [],
    };
  },
  created() {
    let id = this.$route.query.id;
    this.getDetail(id);
  },
  methods: {
    getDetail(id) {
      SelectQuestionBankListForHistoryId(id).then((res) => {
        let { info, list } = res.data.data;
        this.info = info;
        this.list = list.map((t) => {
          t.subjectContentObj = JSON.parse(t.subjectContent);
          return t;
        });
      });
    },
    getList() {},
  },
};
</script>
<style lang="scss" scoped>
</style>