<template>
  <div class="mark-operation grading-operation home">
    <view-header> </view-header>
    <div class="home-body">
      <div class="home-main grading-detail">
        <div class="part-box-head grading-head">
          <Form ref="FilterForm" label-position="left" inline>
            <FormItem>
              <Select
                v-model="filter.questionId"
                @on-change="areaChange"
                placeholder="选择考区"
              >
                <Option
                  v-for="area in areas"
                  :key="area.id"
                  :value="area.id"
                  :label="area.areaName"
                ></Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button
                size="small"
                class="btn-form-search"
                type="primary"
                @click="toPage(1)"
                >查询</Button
              >
            </FormItem>
          </Form>
        </div>
        <mark-step
          :steps="steps"
          :init-step="curStep"
          :show-analysis="false"
          @on-change="stepChange"
          ref="MarkStep"
          v-if="steps.levelStep"
        ></mark-step>
        <div class="detail-body clear-float">
          <!-- detail-aciton -->
          <div
            :class="[
              'detail-action',
              { 'detail-action-fullscreen': isFullscreenMarking }
            ]"
          >
            <mark-action
              :cur-paper-or-task="curPaper"
              :levels="levels"
              :user-role="curUserRoleType"
              @on-leader-level="gradingCurPaper"
              @on-select-score="scoreCurPaper"
              @on-pass="passCurPaper"
              ref="GradeAction"
              v-if="curPaper.id"
            ></mark-action>
          </div>
          <!-- detail-papers -->
          <div :class="detailPapersClasses">
            <div class="detail-papers-carousel">
              <grade-history-paper
                :question-id="filter.questionId"
                stage="SCORE"
                @on-paper-click="toViewCarouselPaper"
                v-if="filter.questionId"
                ref="GradeHistoryPaper"
              ></grade-history-paper>
            </div>
            <div class="detail-papers-list" v-if="papers.length">
              <div :class="imageViewClasses">
                <div
                  :class="[
                    'image-view',
                    { 'image-view-act': curPaperIndex === index }
                  ]"
                  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" v-if="total > size">
                <Page
                  :current="current"
                  :total="total"
                  :page-size="size"
                  show-total
                  show-elevator
                  :page-size-opts="[4, 6, 8]"
                  @on-page-size-change="pageSizeChange"
                  @on-change="toPage"
                ></Page>
              </div>
            </div>
            <div class="detail-papers-list" v-else>
              <p class="detail-papers-none">暂无数据</p>
            </div>
          </div>
        </div>

        <view-footer></view-footer>
      </div>
    </div>

    <!-- image-preview -->
    <image-preview
      class="grading-operation-image-preview"
      :image-list="papers"
      :init-index="curPaperIndex"
      @on-paper-change="selectPaper"
      @on-page-prev="prevPage"
      @on-page-next="nextPage"
      @on-close="isFullscreenMarking = false"
      header-hide
      ref="ImagePreview"
      v-if="papers.length"
    ></image-preview>

    <!-- carousel paper review -->
    <image-preview
      class="grading-operation-image-preview"
      :image-list="carouselPapers"
      :init-index="curCarouselPaperIndex"
      @on-paper-change="selectCarouselPaper"
      @on-close="carouseImagePreviewClose"
      loop
      header-hide
      ref="CarouselPapersPreview"
      v-if="carouselPapers.length"
    ></image-preview>
  </div>
</template>

<script>
import {
  markerTaskList,
  markerChangeLevelPaperList,
  markerScoreStatData,
  areaList,
  workLevelList,
  subjectDetail,
  paperSelectLevelOrScore,
  paperTaskPass
} from "@/api";
import ImagePreview from "@/components/common/ImagePreview";
import MarkStep from "./components/MarkStep";
import GradeHistoryPaper from "../grading/components/GradeHistoryPaper";
import MarkAction from "./components/MarkAction";
// 三种情况：
// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
// 评卷员：操作记录，试卷列表，操作盘（打分）

// TIP:不考虑管理员、科组长的情况
// 管理员：试卷列表，操作盘
// 科组长：操作记录，试卷列表，操作盘（改档）

export default {
  name: "mark-operation",
  components: {
    ImagePreview,
    MarkStep,
    GradeHistoryPaper,
    MarkAction
  },
  data() {
    return {
      filter: {
        markerId: this.$ls.get("user").id,
        questionId: ""
      },
      typeFilter: {
        undo: {
          sort: "paper.level",
          stage: "SCORE"
        },
        done: {
          level: "",
          sort: "updatedOn,desc",
          stage: "SCORE"
        },
        shift: {
          isShift: true,
          isShiftScore: false
        },
        shiftScore: {
          isShift: false,
          isShiftScore: true
        }
      },
      workId: this.$route.params.workId,
      subjectId: this.$route.params.subjectId,
      subject: "",
      curSubject: {},
      curUserRoleType: "MARKER",
      current: 1,
      size: 6,
      total: 0,
      totalPage: 1,
      curStep: null,
      curStandardGradeId: "",
      steps: [],
      levels: [],
      areas: [],
      papers: [],
      curPaper: {},
      curPaperIndex: 0,
      // carousel paper review,
      carouselPapers: [],
      curCarouselPaperIndex: 0,
      beforeCarouselCurPaperIndex: 0,
      isFullscreenMarking: false
    };
  },
  computed: {
    detailPapersClasses() {
      return ["detail-papers", `detail-papers-col-${1 + this.size / 2}`];
    },
    imageViewClasses() {
      return ["image-view-list", `image-view-list-${this.size / 2}`];
    }
  },
  mounted() {
    this.subject = this.subjectId.split("-")[1];
    this.initData();
  },
  methods: {
    async initData() {
      // this.getSubjectDetail();
      this.getWorkLevels();

      await this.getAreaList();
      this.filter.questionId = this.areas[0].id;
      this.getStepLevels();
    },
    async getSubjectDetail() {
      this.curSubject = await subjectDetail(this.subjectId);
    },
    async getList() {
      const datas = {
        ...this.filter,
        ...this.typeFilter[this.curStep.type],
        page: this.current - 1,
        size: this.size
      };
      if (this.curStep.type === "done") {
        datas.level = this.curStep.name;
      }
      const requestAction = this.curStep.type.includes("shift")
        ? markerChangeLevelPaperList
        : markerTaskList;

      const data = await requestAction(datas);
      this.papers = data.data.map(paper => {
        paper.title = `NO.${paper.sn}`;
        return paper;
      });
      this.total = data.totalCount;
      this.totalPage = data.pageCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    async getStepLevels() {
      const data = await markerScoreStatData(
        this.filter.markerId,
        this.filter.questionId
      );
      const undoIndex = data.findIndex(item => item.id === null);
      let otherStep = [];
      if (undoIndex !== -1) {
        const undo = { ...data[undoIndex] };
        data.splice(undoIndex, 1);

        otherStep.push({
          name: "待评",
          count: undo.count,
          type: "undo"
        });
        otherStep.push({
          name: "改档",
          count: undo.shift,
          type: "shift"
        });
        otherStep.push({
          name: "改档打分",
          count: undo.shiftScore,
          type: "shiftScore"
        });
      }
      let levelStep = data.map(item => {
        return {
          ...item,
          name: item.id,
          type: "done"
        };
      });
      this.steps = { levelStep, otherStep };
      if (!this.curStep) {
        let curStep = {};
        if (undoIndex === -1) {
          curStep = levelStep[0];
        } else {
          curStep = otherStep[0];
        }
        this.curStep = curStep;
      }
    },
    async getWorkLevels() {
      const data = await workLevelList(this.workId);
      this.levels = data.map(item => {
        return {
          id: item.id,
          name: item.code,
          minScore: item.minScore,
          maxScore: item.maxScore
        };
      });
    },
    async getAreaList() {
      const data = await areaList({
        workId: this.workId,
        subject: this.subject
      });
      this.areas = data.map(item => {
        return {
          id: item.id,
          areaName: item.areaName,
          areaCode: item.areaCode
        };
      });
    },
    pageSizeChange(size) {
      this.size = size;
      this.toPage(1);
      this.getStepLevels();
    },
    async stepChange(step) {
      this.curStep = step;
      this.current = 1;
      await this.getList();
      if (this.papers.length) {
        this.selectPaper(0);
      } else {
        this.curPaper = {};
      }
    },
    areaChange() {
      this.getStepLevels();
      this.toPage(1);
    },
    selectPaper(index) {
      this.curPaperIndex = index;
      this.curPaper = { ...this.papers[index] };
    },
    toReview(index) {
      this.isFullscreenMarking = true;
      this.selectPaper(index);
      this.$refs.ImagePreview.open();
    },
    async prevPage() {
      if (this.current === 1) {
        this.$Message.warning("当前已经是第一条数据了");
        return;
      }
      this.current--;
      await this.getList();
      this.selectPaper(this.papers.length - 1);
      this.$nextTick(() => {
        if (this.papers.length) this.$refs.ImagePreview.initData();
      });
    },
    async nextPage() {
      if (this.current === this.totalPage) {
        if (this.current > 1) {
          this.current--;
        } else {
          this.$Message.warning("当前已经是最后一条数据了");
          this.$refs.ImagePreview.cancel();
          this.$refs.CarouselPapersPreview &&
            this.$refs.CarouselPapersPreview.cancel();
        }
      }
      // 下一页时，继续获取当前页数据。
      await this.getList();
      this.selectPaper(0);
      this.$nextTick(() => {
        if (this.papers.length) this.$refs.ImagePreview.initData();
      });
    },
    async gradingCurPaper({ selectedLevel }) {
      const data = await paperSelectLevelOrScore(
        this.curPaper.id, // is taskId
        selectedLevel,
        "LEVEL"
      );
      this.updatePaperList(data);
      this.getStepLevels();
      this.updateHistory();
      this.toNext();
    },
    async scoreCurPaper(score) {
      const data = await paperSelectLevelOrScore(
        this.curPaper.id, // is taskId
        score,
        "SCORE"
      );
      this.updatePaperList(data);
      this.getStepLevels();
      this.updateHistory();
      this.toNext();
    },
    updatePaperList(data) {
      const index = this.papers.findIndex(item => item.id === data.id);
      this.papers[index] = Object.assign(this.papers[index], data);
    },
    async passCurPaper(level) {
      await paperTaskPass(this.curPaper.id);
      this.toNext();
    },
    toNext() {
      this.$refs.ImagePreview.showNext();
    },
    updateHistory() {
      this.$refs.GradeHistoryPaper.updatePapers();
    },
    // paper carousel
    toViewCarouselPaper(paperIndex, papers) {
      this.isFullscreenMarking = true;
      this.beforeCarouselCurPaperIndex = this.curPaperIndex;
      this.curPaperIndex = null;
      this.carouselPapers = papers;
      this.selectCarouselPaper(paperIndex);
      this.$nextTick(() => {
        this.$refs.CarouselPapersPreview.open();
      });
    },
    selectCarouselPaper(index) {
      this.curCarouselPaperIndex = index;
      this.curPaper = { ...this.carouselPapers[index] };
    },
    carouseImagePreviewClose() {
      this.isFullscreenMarking = false;
      this.selectPaper(this.beforeCarouselCurPaperIndex);
    }
  }
};
</script>
