<template>
  <div class="grading-detail">
    <grade-step
      :steps="steps"
      @on-change="stepChange"
      ref="GradeStep"
    ></grade-step>
    <div class="detail-body" v-if="curStep.name !== 'analysis'">
      <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">
          <grade-standard-paper ref="GradeStandardPaper"></grade-standard-paper>
          <paper-carousel
            :papers="papers"
            v-if="!IS_ADMIN"
            ref="PaperCarousel"
          ></paper-carousel>
        </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" @click="toReview(index)">
                <img :src="image.thumbUrl" :alt="image.title" />
              </div>
            </div>
          </div>
          <div class="part-page">
            <Page
              :current="current"
              :total="total"
              :page-size="size"
              show-total
              show-elevator
              :show-sizer="IS_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">
        <grade-action
          :paper="curPage"
          :levels="levels"
          :step="curStep"
          :user-role="curUserRoleType"
          @on-confirm="gradeCurPaper"
          ref="GradeAction"
          v-if="curPage.id && curStep.name"
        ></grade-action>
      </div>
    </div>
    <div class="detail-body" v-else>
      <grade-analysis ref="GradeAnalysis"></grade-analysis>
    </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 { papers, levels } from "@/constants/apiTempData";
import { paperPageList } from "@/api";
import ImagePreview from "@/components/common/ImagePreview";
import GradeStep from "./components/GradeStep";
import GradeStandardPaper from "./components/GradeStandardPaper";
import PaperCarousel from "./components/PaperCarousel";
import GradeAction from "./components/GradeAction";
import GradeAnalysis from "./components/GradeAnalysis";
// 三种情况：
// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
// 管理员：标准卷，试卷列表，操作盘
// 科组长：标准卷，操作记录，试卷列表，操作盘（定档，标准卷，打回）
// 评卷员：标准卷，操作记录，试卷列表，操作盘（只分档）

export default {
  name: "grading-detail",
  components: {
    ImagePreview,
    PaperCarousel,
    GradeStep,
    GradeStandardPaper,
    GradeAction,
    GradeAnalysis
  },
  data() {
    return {
      filter: {
        workId: this.$route.params.workId,
        subjectId: this.$route.params.subjectId,
        areaCode: ""
      },
      curUserRoleType: "MARKER",
      current: 1,
      size: 6,
      total: 0,
      totalPage: 1,
      curStep: {},
      curStandardGradeId: "",
      steps: [],
      levels: levels,
      papers: [],
      curPage: {},
      curPaperIndex: 0
    };
  },
  computed: {
    detailPapersClasses() {
      return ["detail-papers", `detail-papers-col-${1 + this.size / 2}`];
    },
    imageViewClasses() {
      return ["image-view-list", `image-view-list-${this.size / 2}`];
    },
    IS_ADMIN() {
      return this.curUserRoleType === "ADMIN";
    },
    IS_MARKER() {
      return this.curUserRoleType === "MARKER";
    },
    IS_MARK_LEADER() {
      return this.curUserRoleType === "MARK_LEADER";
    }
  },
  mounted() {
    // this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
    this.initData();
  },
  methods: {
    initData() {
      this.papers = papers.slice(0, this.size).map((item, index) => {
        return {
          ...item,
          title: item.examNumber,
          score: "95",
          grade: "A"
        };
      });
      const levelStep = levels.map(item => {
        return {
          ...item,
          type: "done",
          typeName: "已评"
        };
      });
      // TODO:后台获取的数据是已经拼装好的，试卷信息中也会携带试卷各种状态信息
      // 所以操作盘只需要根据试卷信息来动态展示即可
      this.steps = [
        ...levelStep,
        {
          name: "待评",
          type: "undo",
          typeName: "待评",
          gcount: 100,
          gpercent: 10.1,
          pt: 12,
          count: 100,
          percent: 8.1,
          kdpt: 10
        },
        {
          name: "打回",
          type: "refuse",
          typeName: "打回",
          gcount: 100,
          gpercent: 10.1,
          pt: 12,
          count: 100,
          percent: 8.1,
          kdpt: 10
        }
      ];
      this.$refs.GradeStep.selectStep(this.steps[0]);
      this.curPage = { ...this.papers[0] };
      this.curPaperIndex = 0;
    },
    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,
          thumbUrl: paper.thumbSrc,
          missing: paper.missing,
          stage: paper.stage,
          style: {},
          deg: 0
        };
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    pageSizeChange(size) {
      this.size = size;
      // this.toPage(1);
      this.initData();
      this.$nextTick(() => {
        this.$refs.GradeStandardPaper.$refs.Carousel.handleResize();
        this.$refs.PaperCarousel &&
          this.$refs.PaperCarousel.$refs.Carousel.handleResize();
      });
    },
    stepChange(step) {
      this.curStep = step;
    },
    toReview(index) {
      this.curPage = { ...this.papers[index] };
      this.curPaperIndex = index;
      this.$refs.ImagePreview.open();
    },
    paperPrev(index) {
      this.curPage = { ...this.papers[index] };
      this.curPaperIndex = index;
    },
    paperNext(index) {
      this.curPage = { ...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

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