<template>
  <div class="quality home">
    <div class="home-header">
      <view-header> </view-header>
    </div>

    <div class="home-body">
      <div class="home-main">
        <Form ref="FilterForm" label-position="left" inline>
          <FormItem label="工作文件夹：">
            <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 label="科目：">
            <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 label="考区：">
            <Select v-model="filter.areaCode" placeholder="请选择考区">
              <Option
                v-for="area in areas"
                :key="area.id"
                :value="area.areaCode"
                :label="area.areaName"
              ></Option>
            </Select>
          </FormItem>
          <FormItem label="起始编号：">
            <InputNumber
              v-model="filter.startNumber"
              :precision="0"
              :min="1"
              placeholder="请输入数字"
              clearable
            ></InputNumber>
          </FormItem>
          <FormItem label="终止编号：">
            <InputNumber
              v-model="filter.endNumber"
              :min="filter.startNumber"
              :precision="0"
              placeholder="请输入数字"
              clearable
            ></InputNumber>
          </FormItem>
          <FormItem label="类型：">
            <Select v-model="paperType" @on-change="typeChange" clearable>
              <Option
                v-for="(val, key) in CAFA_EXCEPTION_TYPE"
                :key="key"
                :value="key"
                :label="val"
              ></Option>
            </Select>
          </FormItem>
          <FormItem label="姓名：">
            <Input
              v-model.trim="filter.name"
              placeholder="请输入姓名"
              clearable
            ></Input>
          </FormItem>
          <FormItem label="排序：">
            <Select v-model="filter.sort">
              <Option
                v-for="(val, key) in SORT_RULE_TYPE"
                :key="key"
                :value="key"
                :label="val"
              ></Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" icon="ios-search" @click="toPage(1)"
              >查询</Button
            >
          </FormItem>
        </Form>
        <image-action-list
          :data="papers"
          :column-number="6"
          :actions="['rotate', 'absent']"
          ref="ImageActionList"
        ></image-action-list>

        <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>
  </div>
</template>

<script>
import { workList, areaList, paperPageList } from "@/api";
import { SORT_RULE_TYPE, CAFA_EXCEPTION_TYPE } from "@/constants/enumerate";
import ImageActionList from "../main/components/ImageActionList";

export default {
  name: "quality",
  components: { ImageActionList },
  data() {
    return {
      filter: {
        workId: null,
        subject: null,
        areaCode: null,
        startNumber: null,
        endNumber: null,
        isManual: false,
        missing: true,
        name: "",
        sort: "1"
      },
      paperType: "0",
      SORT_RULE_TYPE,
      CAFA_EXCEPTION_TYPE,
      current: 1,
      size: 12,
      total: 0,
      papers: [],
      curPaper: {},
      works: [],
      subjects: [],
      areas: []
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      await this.getWorkList();
      this.filter.workId = this.works[0].id;
      this.workChange();
      await this.getAreaList();
      this.filter.areaCode = this.areas[0].areaCode;
      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,
        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,
          thumbSrc: paper.thumbSrc,
          missing: paper.missing,
          stage: paper.stage,
          style: {},
          deg: 0
        };
      });
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.papers = [];
      this.getList();
    },
    workChange() {
      this.filter.subject = null;
      this.filter.areaCode = 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.areaCode = null;
      this.getAreaList();
    },
    typeChange() {
      if (this.paperType === "1") {
        this.filter.isManual = true;
        this.filter.missing = false;
      } else if (this.paperType === "0") {
        this.filter.isManual = false;
        this.filter.missing = true;
      } else {
        this.filter.isManual = false;
        this.filter.missing = false;
      }
    }
  }
};
</script>
