<template>
  <div class="upload-paper part-box">
    <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">
          <upload-button
            :btn-type="subject.paperUrl ? 'primary' : 'default'"
            btn-icon="md-cloud-upload"
            btn-content="上传试卷"
            :upload-url="subject.uploadUrl"
            :format="['pdf', 'png', 'jpg']"
            @upload-success="
              response => {
                this.uploadSuccess(response, subject);
              }
            "
          ></upload-button>
        </td>
      </tr>
    </table>
  </div>
</template>

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

export default {
  name: "upload-paper",
  components: { UploadButton },
  data() {
    return {
      workId: this.$route.params.workId,
      papers: [
        {
          id: "1",
          name: "考区01",
          subjects: [
            {
              id: "34-SC",
              name: "色彩",
              subject: "SC",
              uploadUrl: "http://sdf",
              paperUrl: "http"
            },
            {
              id: "34-SM",
              name: "素描",
              subject: "SM",
              uploadUrl: "http://sdf",
              paperUrl: ""
            },
            {
              id: "34-SX",
              name: "速写",
              subject: "SX",
              uploadUrl: "http://sdf",
              paperUrl: ""
            }
          ]
        },
        {
          id: "2",
          name: "考区02",
          subjects: [
            {
              id: "34-SC",
              name: "色彩",
              subject: "SC",
              uploadUrl: "http://sdf",
              paperUrl: ""
            },
            {
              id: "34-SM",
              name: "素描",
              subject: "SM",
              uploadUrl: "http://sdf",
              paperUrl: ""
            },
            {
              id: "34-SX",
              name: "速写",
              subject: "SX",
              uploadUrl: "http://sdf",
              paperUrl: ""
            }
          ]
        }
      ],
      subjects: [
        {
          id: "34-SC",
          name: "色彩",
          subject: "SC"
        },
        {
          id: "34-SM",
          name: "素描",
          subject: "SM"
        },
        {
          id: "34-SX",
          name: "速写",
          subject: "SX"
        }
      ]
    };
  },
  methods: {
    async getData() {
      const data = await updatePaperDetail(this.workId);
      this.papers = data.map(area => {
        area.subjects = area.subjects.map(subject => {
          subject.uploadUrl = ``;
          return subject;
        });
        return area;
      });
    },
    uploadSuccess(response, subject) {
      subject.paperUrl = response.data.url;
    }
  }
};
</script>
