<template>
  <div class="grade-history-paper">
    <div class="carousel-title">
      <h3>{{ title }}</h3>
    </div>
    <paper-carousel
      :papers="papers"
      @on-paper-change="setCurPaper"
      @on-paper-click="paperClick"
      ref="PaperCarousel"
    ></paper-carousel>
  </div>
</template>

<script>
import { actionHistory } from "@/api";
import PaperCarousel from "@/components/PaperCarousel";

export default {
  name: "grade-history-paper",
  components: { PaperCarousel },
  props: {
    questionId: {
      type: Number
    }
  },
  data() {
    return {
      userId: "",
      stage: "LEVEL",
      curPaper: {},
      papers: []
    };
  },
  computed: {
    title() {
      // TODO:根据不同试卷状态，展示不同信息
      return this.curPaper.title;
    }
  },
  watch: {
    questionId(val) {
      this.papers = [];
      this.updatePapers();
    }
  },
  mounted() {
    this.userId = this.$ls.get("user", { id: "" }).id;
    this.updatePapers();
  },
  methods: {
    async updatePapers() {
      const datas = {
        markerId: this.userId,
        stage: this.stage,
        questionId: this.questionId
      };

      this.papers = await actionHistory(datas);
      this.$refs.PaperCarousel.initIndex();
    },
    setCurPaper(paper) {
      this.curPaper = paper;
    },
    paperClick(paperIndex, papers) {
      this.$emit("on-paper-click", paperIndex, papers);
    }
  }
};
</script>
