<template>
  <div class="grading-detail">
    <grade-step
      :steps="steps"
      @on-change="stepChange"
      ref="GradeStep"
      v-if="steps.length"
    ></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.questionId" placeholder="请选择考区">
              <Option
                v-for="area in areas"
                :key="area.id"
                :value="area.id"
                :label="area.areaName"
              ></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
            :levels="levels"
            :question-id="filter.questionId"
            @on-paper-click="toViewCarouselPaper"
            v-if="levels && filter.questionId"
          ></grade-standard-paper>
          <grade-history-paper
            :question-id="filter.questionId"
            @on-paper-click="toViewCarouselPaper"
            v-if="filter.questionId && !IS_ADMIN"
          ></grade-history-paper>
        </div>
        <div class="detail-papers-list">
          <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
              @on-change="toPage"
            ></Page>
          </div>
        </div>
      </div>
      <!-- detail-aciton -->
      <div class="detail-action">
        <grade-action
          :cur-paper="curPaper"
          :levels="levels"
          :user-role="curUserRoleType"
          @on-leader-level="leaderSelectLevel"
          @on-code-search="serachPaperByCode"
          ref="GradeAction"
          v-if="curPaper.id"
        ></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-paper-change="selectPaper"
      @on-page-prev="prevPage"
      @on-page-next="nextPage"
      header-hide
      ref="ImagePreview"
      v-if="papers.length"
    ></image-preview>
    <!-- carousel paper review -->
    <image-preview
      class="grading-detail-image-preview"
      :image-list="carouselPapers"
      :init-index="curCarouselPaperIndex"
      @on-paper-change="selectCarouselPaper"
      loop
      header-hide
      ref="CarouselPapersPreview"
      v-if="carouselPapers.length"
    ></image-preview>
    <!-- modify-leader-grading -->
    <modify-leader-grading
      :level-info="levelInfo"
      :markers="markers"
      @modified="leaderGradingSuccess"
      ref="ModifyLeaderGrading"
    ></modify-leader-grading>
  </div>
</template>

<script>
import {
  paperList,
  levelStatData,
  areaList,
  workLevelList,
  paperSelectLevel,
  taskSnSearch
} from "@/api";
import ImagePreview from "@/components/common/ImagePreview";
import GradeStep from "./components/GradeStep";
import GradeStandardPaper from "./components/GradeStandardPaper";
import GradeHistoryPaper from "./components/GradeHistoryPaper";
import GradeAction from "./components/GradeAction";
import GradeAnalysis from "./components/GradeAnalysis";
import ModifyLeaderGrading from "./components/ModifyLeaderGrading";
// 三种情况：
// 管理员(ADMIN)，科组长(MARK_LEADER)，评卷员(MARKER)
// 管理员：标准卷，试卷列表，操作盘
// 科组长：标准卷，操作记录，试卷列表，操作盘（定档，标准卷，打回）

// TIP:不考虑评卷员的情况
// 评卷员：标准卷，操作记录，试卷列表，操作盘（只分档）

export default {
  name: "grading-detail",
  components: {
    ImagePreview,
    GradeStep,
    GradeHistoryPaper,
    GradeStandardPaper,
    GradeAction,
    GradeAnalysis,
    ModifyLeaderGrading
  },
  data() {
    return {
      filter: {
        questionId: "",
        sort: "secretNumber",
        isSample: false
      },
      typeFilter: {
        done: {
          level: ""
        },
        reject: {
          reject: true
        },
        arbitrate: {
          arbi: true
        }
      },
      workId: this.$route.params.workId,
      subjectId: this.$route.params.subjectId,
      subject: "",
      curUserRoleType: "MARKER",
      current: 1,
      size: 6,
      total: 0,
      totalPage: 1,
      curStep: { type: "analysis", name: "analysis" },
      curStandardGradeId: "",
      steps: [],
      levels: [],
      areas: [],
      papers: [],
      curPaper: {},
      curPaperIndex: 0,
      // leader-grade
      levelInfo: {},
      markers: [],
      // carousel paper review,
      carouselPapers: [],
      curCarouselPaperIndex: 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_MARK_LEADER() {
      return this.curUserRoleType === "MARK_LEADER";
    }
  },
  mounted() {
    this.subject = this.subjectId.split("-")[1];
    this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
    this.initData();
  },
  methods: {
    async initData() {
      await this.getAreaList();
      this.filter.questionId = this.areas[0].id;
      this.getStepLevels();
      this.getWorkLevels();
    },
    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 data = await paperList(datas);
      this.papers = data.data.map(paper => {
        paper.title = paper.examNumber;
        return paper;
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    async getStepLevels() {
      const data = await levelStatData(this.subjectId, 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.rejected,
          type: "reject"
        });
        otherStep.push({
          name: "仲裁",
          count: undo.arbitrated,
          type: "arbitrate"
        });
      }
      let levelMenu = data.map(item => {
        return {
          ...item,
          name: item.id,
          type: "done"
        };
      });
      this.steps = [...levelMenu, ...otherStep];
    },
    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
        };
      });
    },
    async stepChange(step) {
      this.curStep = step;
      if (step.type === "analysis") return;

      this.current = 1;
      await this.getList();
      if (this.papers.length) {
        this.selectPaper(0);
      } else {
        this.curPaper = {};
      }
    },
    selectPaper(index) {
      this.curPaperIndex = index;
      this.curPaper = { ...this.papers[index] };
    },
    toReview(index) {
      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.$refs.ImagePreview.initData();
    },
    async nextPage() {
      if (this.current === this.totalPage) {
        this.$Message.warning("当前已经是最后一条数据了");
        return;
      }
      this.current++;
      await this.getList();
      this.selectPaper(0);
      this.$refs.ImagePreview.initData();
    },
    async gradeCurPaper(level) {
      if (!this.IS_MARK_LEADER) return;

      await paperSelectLevel(this.curPaper.id, level.name, "LEVEL");
      this.getStepLevels();
      this.toNext();
    },
    toNext() {
      this.$refs.ImagePreview.showNext();
    },
    async serachPaperByCode(params) {
      const data = await taskSnSearch(
        params.codeType,
        params.code,
        this.filter.questionId
      );
      if (!data) {
        this.$Message.error("没有查找到结果！");
        return;
      }
      data.title = data.examNumber;
      this.papers = [data];
      this.total = 1;
    },
    leaderSelectLevel(levelInfo, markers) {
      this.levelInfo = levelInfo;
      this.markers = markers;
      this.$refs.ModifyLeaderGrading.open();
    },
    leaderGradingSuccess() {
      this.getStepLevels();
      this.toNext();
    },
    // paper carousel
    toViewCarouselPaper(paperIndex, papers) {
      this.curCarouselPaperIndex = paperIndex;
      this.carouselPapers = papers;
      this.$refs.CarouselPapersPreview.open();
    },
    selectCarouselPaper(index) {
      this.curCarouselPaperIndex = index;
      this.curPaper = { ...this.carouselPapers[index] };
    }
  }
};
</script>
