<template>
  <div class="grade-standard-paper paper-carousel">
    <div class="carousel-title">
      <h3>标准卷</h3>
      <Select v-model="curStandardGradeId">
        <Option
          v-for="(level, gindex) in levels"
          :key="gindex"
          :value="level.id"
          :label="level.name"
        ></Option>
      </Select>
    </div>
    <div class="carousel-body">
      <Carousel
        v-model="curPaperIndex"
        arrow="always"
        dots="none"
        ref="Carousel"
      >
        <CarouselItem v-for="(paper, pindex) in papers" :key="pindex">
          <div class="image-view-contain">
            <img :src="paper.thumbUrl" :alt="paper.title" />
          </div>
        </CarouselItem>
      </Carousel>
    </div>
  </div>
</template>

<script>
import { papers } from "@/constants/apiTempData";

export default {
  name: "grade-standard-paper",
  data() {
    return {
      curStandardGradeId: "",
      levels: [],
      papers: [],
      curPaperIndex: 0
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.papers = papers.slice(4, 8).map((item, index) => {
        return {
          ...item,
          title: item.examNumber,
          score: "95",
          grade: "A"
        };
      });

      this.levels = "ABCDEFGHIJK".split("").map((item, index) => {
        return {
          id: index,
          name: item
        };
      });
    }
  }
};
</script>
