<template>
  <div class="inspection-grading">
    <Form ref="FilterForm" label-position="left" inline>
      <FormItem>
        <Select
          v-model="filter.workId"
          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.areaCode" placeholder="请选择考区">
          <Option value=""></Option>
        </Select>
      </FormItem>
      <FormItem>
        <Select v-model="filter.subject" placeholder="请选择科目">
          <Option value=""></Option>
        </Select>
      </FormItem>
      <FormItem>
        <Select
          v-model="filter.status"
          placeholder="请选择类型"
          clearable
          style="width: 120px"
        >
          <Option
            v-for="(val, key) in STATUS_TYPE"
            :key="key"
            :value="key"
            :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">
        <Page
          :current="current"
          :total="total"
          :page-size="size"
          show-total
          show-elevator
          @on-change="toPage"
        ></Page>
      </div>
      <div class="check-grade-action">
        <div class="paper-info" v-if="curPaper.id">
          <p>{{ curPaper.examNumber }}</p>
          <p>NO.{{ curPaper.sn }}</p>
          <p>原档位：{{ curPaper.orgGrade }}</p>
          <p>申请档位：{{ curPaper.applyGrade }}</p>
        </div>
        <div class="check-grade-result" v-if="curPaper.id">
          <p>{{ curPaper.status ? "已同意" : "未同意" }}</p>
        </div>
        <div class="check-grade-btn" v-if="curPaper.id">
          <Button type="primary" @click="confirm(1)" :disabled="curPaper.status"
            >同意改档</Button
          >
          <Button type="error" @click="confirm(0)" :disabled="curPaper.status"
            >不同意改档</Button
          >
        </div>
      </div>
    </div>

    <!-- image-preview -->
    <image-preview
      class="check-grade-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 } from "@/constants/apiTempData";

import {
  inspectionCheckGradePageList,
  inspectionConfirmCheckGrade,
  workList
} from "@/api";
import ImagePreview from "@/components/common/ImagePreview";

export default {
  name: "inspection-grading",
  components: { ImagePreview },
  data() {
    return {
      filter: {
        workId: "",
        areaCode: "",
        subject: "",
        status: ""
      },
      STATUS_TYPE: {
        0: "未处理",
        1: "已处理"
      },
      works: [],
      current: 1,
      size: 8,
      total: 0,
      totalPage: 1,
      papers: [],
      curPaper: {},
      curPaperIndex: 0
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.papers = papers.map((item, index) => {
        return {
          ...item,
          orgGrade: "A",
          applyGrade: "B",
          status: Math.random() < 0.3
        };
      });
      this.curPaper = { ...this.papers[0] };
      this.curPaperIndex = 0;
    },
    async getWorkList() {
      const data = await workList();
      this.works = data.map(item => {
        return {
          id: item.id,
          name: item.name
        };
      });
    },
    async getList() {
      const datas = {
        ...this.filter,
        current: this.current,
        size: this.size
      };
      const data = await inspectionCheckGradePageList(datas);
      this.papers = data.data;
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    async confirm(isAgree) {
      if (isAgree) {
        this.updateCheckGradeState(status);
        return;
      }

      this.$Modal.confirm({
        title: "操作警告",
        content: "确定不同意当前改档吗？",
        onOk: () => {
          this.updateCheckGradeState(status);
        }
      });
    },
    async updateCheckGradeState(status) {
      // TODO:
      await inspectionConfirmCheckGrade(this.curPaper.id);
      this.$refs.ImagePreview.showNext();
    },
    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();
    }
  }
};
</script>
