<template>
  <div class="mark-detail grading-detail">
    <grade-step :show-analysis="false" @on-change="stepChange"></grade-step>
    <div :class="bodyClasses">
      <div class="detail-filter">
        <Form ref="FilterForm" label-position="left" inline>
          <FormItem>
            <Select v-model="filter.areaCode" placeholder="请选择考区">
              <Option value=""></Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" icon="ios-search" @click="toPage(1)"
              >查询</Button
            >
          </FormItem>
        </Form>
      </div>
      <!-- detail-papers -->
      <div :class="detailPapersClasses">
        <div
          class="detail-papers-carousel"
          v-if="this.curUserRoleType !== 'ADMIN'"
        >
          <grade-history-paper
            :question-id="filter.questionId"
          ></grade-history-paper>
        </div>
        <div class="detail-papers-list">
          <div :class="imageViewClasses">
            <div
              class="image-view"
              v-for="(image, index) in papers"
              :key="index"
            >
              <h5 class="image-view-title">{{ image.title }}</h5>
              <div class="image-view-contain">
                <img
                  :src="image.thumbSrc"
                  :alt="image.title"
                  @click="toReview(index)"
                />
              </div>
            </div>
          </div>
          <div class="part-page">
            <Page
              :current="current"
              :total="total"
              :page-size="size"
              show-total
              show-elevator
              :show-sizer="curUserRoleType === 'MARKER'"
              :page-size-opts="[4, 6, 8]"
              @on-page-size-change="pageSizeChange"
              @on-change="toPage"
            ></Page>
          </div>
        </div>
      </div>
      <!-- detail-aciton -->
      <div class="detail-action">
        <mark-action
          :paper="curPaper"
          :levels="levels"
          :step="curStep"
          :user-role="curUserRoleType"
          @on-confirm="gradeCurPaper"
          ref="GradeAction"
        ></mark-action>
      </div>
    </div>

    <!-- image-preview -->
    <image-preview
      class="grading-detail-image-preview"
      :image-list="papers"
      :init-index="curPaperIndex"
      @on-prev="paperPrev"
      @on-next="paperNext"
      @on-page-prev="prevPage"
      @on-page-next="nextPage"
      header-hide
      ref="ImagePreview"
      v-if="papers.length"
    ></image-preview>
  </div>
</template>

<script>
import { paperPageList } from "@/api";
import ImagePreview from "@/components/common/ImagePreview";
import GradeStep from "../grading/components/GradeStep";
import GradeHistoryPaper from "../grading/components/GradeHistoryPaper";
import MarkAction from "./components/MarkAction";
// 三种情况：
// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
// 管理员：试卷列表，操作盘
// 科组长：操作记录，试卷列表，操作盘（改档）
// 评卷员：操作记录，试卷列表，操作盘（打分）

export default {
  name: "mark-detail",
  components: {
    ImagePreview,
    GradeStep,
    GradeHistoryPaper,
    MarkAction
  },
  data() {
    return {
      filter: {
        workId: this.$route.params.workId,
        subjectId: this.$route.params.subjectId,
        areaCode: ""
      },
      curUserRoleType: "ADMIN",
      current: 1,
      size: 8,
      total: 0,
      totalPage: 1,
      curStep: {},
      curStandardGradeId: "",
      levels: [],
      papers: [],
      curPaper: {},
      curPaperIndex: 0
    };
  },
  computed: {
    bodyClasses() {
      return [
        "detail-body",
        { "detail-body-2": this.curUserRoleType === "ADMIN" }
      ];
    },
    detailPapersClasses() {
      return [
        "detail-papers",
        {
          [`detail-papers-col-${1 + this.size / 2}`]:
            this.curUserRoleType !== "ADMIN"
        }
      ];
    },
    imageViewClasses() {
      return [
        "detail-paper-list",
        "image-view-list",
        `image-view-list-${this.size / 2}`
      ];
    }
  },
  mounted() {
    // this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
    // if (this.curUserRoleType === "ADMIN") this.size = 8;
    this.initData();
  },
  methods: {
    initData() {
      this.papers = "#"
        .repeat(this.size)
        .split("")
        .map((item, index) => {
          return {
            id: index,
            subjectName: "素描",
            title: "2020105133",
            score: "95",
            grade: "A",
            url:
              "http://127.0.0.1:9000/api/file/image/download/33/1/833/1?random=fa8244bb-8ec4-46c1-a16e-1bd6f3b8848e",
            thumbSrc:
              "http://127.0.0.1:9000/api/file/image/download/33/1/833/2?random=497cc903-c01a-458a-9b4e-82b391cef176"
          };
        });
    },
    async getList() {
      const datas = {
        ...this.filter,
        page: this.current - 1,
        size: this.size
      };
      const data = await paperPageList(datas);
      this.papers = data.data.map(paper => {
        return {
          id: paper.id,
          title: paper.examNumber,
          url: paper.imgSrc,
          thumbSrc: paper.thumbSrc,
          missing: paper.missing,
          stage: paper.stage,
          style: {},
          deg: 0
        };
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      // this.getList();
      this.initData();
    },
    pageSizeChange(size) {
      this.size = size;
      this.toPage(1);
    },
    stepChange(step) {
      this.curStep = step;
    },
    toReview(index) {
      this.curPaper = { ...this.papers[index] };
      this.curPaperIndex = index;
      this.$refs.ImagePreview.open();
    },
    paperPrev(index) {
      this.curPaper = { ...this.papers[index] };
      this.curPaperIndex = index;
    },
    paperNext(index) {
      this.curPaper = { ...this.papers[index] };
      this.curPaperIndex = index;
    },
    prevPage() {
      if (this.current === 1) {
        this.$Message.warning("当前已经是第一条数据了");
        return;
      }
      this.current--;
      this.getList();
    },
    nextPage() {
      if (this.current === this.totalPage) {
        this.$Message.warning("当前已经是最后一条数据了");
        return;
      }
      this.current++;
      this.getList();
    },
    gradeCurPaper(grade) {
      // TODO:to grade

      if (this.curPaperIndex === this.size - 1) {
        this.nextPage();
        return;
      } else {
        this.paperNext(this.curPaperIndex + 1);
      }
    }
  }
};
</script>
