<template>
  <div class="papers">
    <div class="part-box">
      <Form ref="FilterForm" label-position="left" inline>
        <FormItem label="科目">
          <Select v-model="filter.subject" placeholder="请选择科目">
            <Option
              v-for="(item, index) in subjects"
              :key="index"
              :value="item.subject"
              :label="item.name"
            ></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.isAbsent">
            <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"
        :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>
</template>

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

export default {
  name: "papers",
  components: { ImageActionList },
  data() {
    return {
      filter: {
        workId: this.$route.params.workId,
        name: "",
        areaCode: "",
        startNumber: null,
        endNumber: null,
        subject: "",
        sort: "",
        isAbsent: ""
      },
      SORT_RULE_TYPE,
      CAFA_EXCEPTION_TYPE,
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      papers: [],
      subjects: []
    };
  },
  mounted() {
    this.getSubjects();
  },
  methods: {
    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();
    },
    async getSubjects() {
      const data = await subjectList(this.filter.workId);
      this.subjects = data.filter(item => item.enable && item.stage === "INIT");
    }
  }
};
</script>
