<template>
  <div class="exam-paper-view">
    <div
      class="exam-paper-item"
      v-for="item in dataList"
      :key="item.questionId"
    >
      <h2 class="exam-paper-area">{{ item.questionName }}</h2>
      <div class="exam-paper-subjects">
        <Button
          v-for="subject in item.subjects"
          :key="subject.subject"
          :type="subject.url ? 'primary' : 'default'"
          shape="circle"
          @click="downloadPaper(subject)"
        >
          {{ subject.subjectName }}
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
import { uploadPaperList } from "@/api";

export default {
  name: "exam-paper-view",
  data() {
    return {
      workId: this.$route.params.workId,
      subjectId: this.$route.params.subjectId,
      subject: "",
      dataList: []
    };
  },
  mounted() {
    this.subject = this.subjectId.split("-")[1];
    this.getData();
  },
  methods: {
    async getData() {
      const data = await uploadPaperList(this.workId);
      this.dataList = data.map(area => {
        area.subjects = area.subjects.filter(
          subject => subject.subject === this.subject
        );
        return area;
      });
    },
    downloadPaper(subject) {
      if (subject.url) window.open(subject.url);
    }
  }
};
</script>
