<template>
  <div class="inspection-grading">
    <Form ref="FilterForm" label-position="left" inline>
      <FormItem>
        <Select
          v-model="filter.workId"
          @on-change="workChange"
          placeholder="请选择工作文件夹"
          style="width: 150px"
        >
          <Option
            v-for="(work, windex) in works"
            :key="windex"
            :value="work.id"
            :label="work.name"
          ></Option>
        </Select>
      </FormItem>
      <FormItem>
        <Select
          v-model="filter.subject"
          @on-change="subjectChange"
          placeholder="请选择科目"
        >
          <Option
            v-for="subject in subjects"
            :key="subject.id"
            :value="subject.subject"
            :label="subject.name"
          ></Option>
        </Select>
      </FormItem>
      <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>
        <Select
          v-model="filter.status"
          placeholder="请选择类型"
          clearable
          style="width: 120px"
        >
          <Option
            v-for="(val, key) in CHANGE_LEVEL_STATUS"
            :key="key"
            :value="key * 1"
            :label="val"
          ></Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" icon="ios-search" @click="toPage(1)"
          >查询</Button
        >
      </FormItem>
    </Form>

    <div class="check-grade">
      <div class="check-grade-list image-view-list image-view-list-4">
        <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" v-if="total > size">
        <Page
          :current="current"
          :total="total"
          :page-size="size"
          show-total
          show-elevator
          @on-change="toPage"
        ></Page>
      </div>
      <div class="check-grade-action" v-if="curPaper.id">
        <div class="paper-info">
          <p>{{ curPaper.examNumber }}</p>
          <p>NO.{{ curPaper.sn }}</p>
          <p>原档位：{{ curPaper.originLevel }}</p>
          <p>申请档位：{{ curPaper.redoLevel }}</p>
        </div>
        <div class="check-grade-result" v-if="curPaper.auditStatus">
          <p>{{ curPaper.auditStatus === 1 ? "已同意" : "未同意" }}</p>
        </div>
        <div class="check-grade-btn" v-else>
          <Button type="primary" @click="confirm(1)">同意改档</Button>
          <Button type="error" @click="confirm(0)">不同意改档</Button>
        </div>
      </div>
    </div>

    <!-- image-preview -->
    <image-preview
      class="check-grade-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>
  </div>
</template>

<script>
import {
  changeLevelPaperAllList,
  inspectionConfirmCheckGrade,
  workList,
  areaList
} from "@/api";
import ImagePreview from "@/components/common/ImagePreview";
import { CHANGE_LEVEL_STATUS } from "@/constants/enumerate";

export default {
  name: "inspection-grading",
  components: { ImagePreview },
  data() {
    return {
      filter: {
        workId: "",
        subject: "",
        questionId: "",
        status: 0
      },
      CHANGE_LEVEL_STATUS,
      works: [],
      subjects: [],
      areas: [],
      current: 1,
      size: 8,
      total: 0,
      totalPage: 1,
      papers: [],
      curPaper: {},
      curPaperIndex: 0
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      await this.getWorkList();
      this.filter.workId = this.works[0].id;
      this.workChange();
      await this.getAreaList();
      this.filter.questionId = this.areas[0].id;
      this.getList();
    },
    async getWorkList() {
      this.works = await workList();
    },
    async getAreaList() {
      const data = await areaList({
        workId: this.filter.workId,
        subject: this.filter.subject
      });
      this.areas = data.map(item => {
        return {
          id: item.id,
          areaName: item.areaName,
          areaCode: item.areaCode
        };
      });
    },
    async getList() {
      const datas = {
        ...this.filter,
        current: this.current,
        size: this.size
      };
      const data = await changeLevelPaperAllList(datas);
      this.papers = data.data;
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    workChange() {
      this.filter.subject = null;
      this.filter.questionId = null;
      const curWork = this.works.find(item => item.id === this.filter.workId);
      this.subjects = curWork.subjects;
      this.filter.subject = this.subjects[0].subject;
    },
    subjectChange() {
      this.filter.questionId = null;
      this.getAreaList();
    },
    async confirm(isAgree) {
      if (isAgree) {
        this.updateCheckGradeState(isAgree);
        return;
      }

      this.$Modal.confirm({
        title: "操作警告",
        content: "确定不同意当前改档吗？",
        onOk: () => {
          this.updateCheckGradeState(isAgree);
        }
      });
    },
    async updateCheckGradeState(auditStatus) {
      await inspectionConfirmCheckGrade({
        id: this.curPaper.id,
        auditStatus
      });
      this.$refs.ImagePreview.showNext();
    },
    selectPaper(index) {
      this.curPaperIndex = index;
      this.curPaper = { ...this.papers[index] };
    },
    toReview(index) {
      this.selectPaper(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;
    },
    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;
      }
      // 下一页时，继续获取当前页数据。
      await this.getList();
      this.selectPaper(0);
      this.$refs.ImagePreview.initData();
    }
  }
};
</script>
