<template>
  <div class="grade-standard-paper">
    <div class="carousel-title">
      <h3>标准卷</h3>
      <Select v-model="curLevel" @on-change="curLevelChange">
        <Option
          v-for="(level, gindex) in levels"
          :key="gindex"
          :value="level.name"
          :label="level.name"
        ></Option>
      </Select>
    </div>
    <paper-carousel
      :papers="papers"
      @on-prev-end="prevLevel"
      @on-next-end="nextLevel"
      @on-paper-click="paperClick"
      ref="PaperCarousel"
    ></paper-carousel>
    <div class="carousel-loading" v-if="isLoading">
      <Icon class="ivu-load-loop" type="ios-loading" />
    </div>
  </div>
</template>

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

export default {
  name: "grade-standard-paper",
  components: { PaperCarousel },
  props: {
    questionId: {
      type: Number
    },
    levels: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      curLevel: "",
      curLevelIndex: 0,
      papers: [],
      paperMap: {},
      isLoading: false
    };
  },
  computed: {
    isFirstLevel() {
      return this.curLevelIndex === 0;
    },
    isLastLevel() {
      return this.lastLevelIndex === this.curLevelIndex;
    },
    lastLevelIndex() {
      return this.levels.length ? this.levels.length - 1 : 0;
    }
  },
  watch: {
    questionId(val) {
      this.paperMap = {};
      this.papers = [];
      this.updatePapers();
    }
  },
  mounted() {
    this.setCurLevel(this.curLevelIndex);
    this.updatePapers();
  },
  methods: {
    setCurLevel(index) {
      this.curLevel = this.levels[index].name;
    },
    curLevelChange() {
      this.curLevelIndex = this.levels.findIndex(
        item => item.name === this.curLevel
      );
      this.updatePapers();
    },
    async updatePapers() {
      await this.getPapers();
      this.$refs.PaperCarousel.initIndex();
    },
    async getPapers() {
      if (this.paperMap[this.curLevel] && this.paperMap[this.curLevel].length) {
        this.papers = this.paperMap[this.curLevel];
        return;
      }
      this.isLoading = true;
      const datas = {
        questionId: this.questionId,
        level: this.curLevel,
        sort: "secretNumber",
        isSample: true,
        page: 0,
        size: 100
      };
      const data = await paperList(datas).catch(() => {});
      this.isLoading = false;
      if (!data) return;
      this.papers = data.data;
      this.paperMap[this.curLevel] = data.data;
    },
    prevLevel() {
      if (this.isFirst) return;
      this.curLevelIndex--;
      this.setCurLevel(this.curLevelIndex);
      this.updatePapers();
    },
    nextLevel() {
      if (this.isLast) return;
      this.curLevelIndex++;
      this.setCurLevel(this.curLevelIndex);
      this.updatePapers();
    },
    paperClick(paperIndex, papers) {
      this.$emit("on-paper-click", paperIndex, papers);
    }
  }
};
</script>
