<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"
              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" placeholder="请选择科目">
              <Option value=""></Option>
            </Select>
          </FormItem>
          <FormItem label="考区：">
            <Select v-model="filter.areaCode" placeholder="请选择考区">
              <Option value=""></Option>
            </Select>
          </FormItem>
          <FormItem label="起始编号：">
            <InputNumber
              v-model="filter.startNumber"
              placeholder="请输入数字"
              clearable
            ></InputNumber>
          </FormItem>
          <FormItem label="终止编号：">
            <InputNumber
              v-model="filter.endNumber"
              placeholder="请输入数字"
              clearable
            ></InputNumber>
          </FormItem>
          <FormItem label="类型：">
            <Select v-model="filter.type">
              <Option
                v-for="(val, key) in CAFA_EXCEPTION_TYPE"
                :key="key"
                :value="key * 1"
                :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">
          <Page
            :current="current"
            :total="total"
            :page-size="size"
            show-total
            show-elevator
            @on-change="toPage"
          ></Page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { workList, 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: 33,
        subject: "SC",
        areaCode: "1",
        startNumber: null,
        endNumber: null,
        isAbsent: "",
        name: "",
        sort: "examNumber"
      },
      SORT_RULE_TYPE,
      CAFA_EXCEPTION_TYPE,
      current: 1,
      size: 12,
      total: 0,
      papers: [],
      curPaper: {},
      works: []
    };
  },
  mounted() {
    this.getWorkList();
    this.getList();
  },
  methods: {
    async getWorkList() {
      const data = await workList();
      this.works = data.map(item => {
        return {
          id: item.id,
          name: item.name
        };
      });
    },
    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.getList();
    }
  }
};
</script>
