<template>
  <div class="container">
    <h3>{{ info.TestPaperName }}</h3>
    <div class="header-opts">
      <el-dropdown @command="handleCommand" v-if="videos && videos.length">
        <span class="el-dropdown-link">
          查看回放<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in videos" :key="item.id" :command="item.video_url">{{ item.file_id }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </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>
        <div v-if="item.subjectType == 4">
          <audio controls>
            <source :src="BASE_URL + item.answer" />
          </audio>
        </div>
        <ul class="answer-list" v-if="item.subjectType == 1">
          <li
            v-for="i in item.subjectContentObj"
            :key="i.option"
            :class="{ active: item.answer == 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;
  }
  .box-card {
    margin-bottom: 20px;
  }
  .questions {
    width: 100%;
  }
  .answer-list {
    display: flex;
    flex-direction: column;
    li {
      list-style: none;
      margin-bottom: 10px;
      padding: 10px 10px;
      &.active {
        border: 2px solid #00c9ff;
        border-radius: 10px;
      }
    }
  }
}
</style>
<script>
import { SelectQuestionBankListForHistoryId } from "@/api/HistoryAnswer";
export default {
  data() {
    return {
      info: {},
      list: [],
      videos:[],
    };
  },
  created() {
    let id = this.$route.query.id;
    this.getDetail(id);
  },
  methods: {
    handleCommand(command){
      window.open(command, "_blank");
    },
    getDetail(id) {
      SelectQuestionBankListForHistoryId(id).then((res) => {
        let { info, list,videos } = res.data.data;
        this.videos = videos;
        this.info = info;
        this.list = list.map((t) => {
          t.subjectContentObj = JSON.parse(t.subjectContent);
          return t;
        });
      });
    },
    getList() {},
  },
};
</script>
<style lang="scss" scoped>
</style>