<template>
  <div class="exam-paper-view">
    <table class="table">
      <tr>
        <th>考区</th>
        <th v-for="(subject, index) in subjects" :key="index">
          {{ subject.name }}
        </th>
      </tr>
      <tr v-for="(area, index) in papers" :key="index">
        <td>{{ area.name }}</td>
        <td v-for="(subject, index) in area.subjects" :key="index">
          <div
            :class="subject.paperUrl ? 'primary' : 'default'"
            @click="downloadPaper(subject)"
          >
            {{ subject.name }}
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

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

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