<template>
  <div class="papers">
    <div class="part-box part-box-filter">
      <Form ref="FilterForm" label-position="left" inline>
        <FormItem>
          <Select
            v-model="filter.subject"
            @on-change="subjectChange"
            placeholder="科目"
          >
            <Option
              v-for="(item, index) in subjects"
              :key="index"
              :value="item.subject"
              :label="item.name"
            ></Option>
          </Select>
        </FormItem>
        <FormItem>
          <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>
          <InputNumber
            v-model="filter.startNumber"
            :min="1"
            :precision="0"
            placeholder="输入开始编号"
            clearable
          ></InputNumber>
        </FormItem>
        <FormItem>
          <InputNumber
            v-model="filter.endNumber"
            :min="filter.startNumber"
            :precision="0"
            placeholder="输入结束编号"
            clearable
          ></InputNumber>
        </FormItem>
        <FormItem>
          <Select v-model="filter.isAbsent" placeholder="试卷类型">
            <Option
              v-for="(val, key) in CAFA_EXCEPTION_TYPE"
              :key="key"
              :value="key * 1"
              :label="val"
            ></Option>
          </Select>
        </FormItem>
        <FormItem>
          <Input
            v-model.trim="filter.name"
            placeholder="输入姓名"
            clearable
          ></Input>
        </FormItem>
        <FormItem>
          <Select v-model="filter.sort" placeholder="排序方式">
            <Option
              v-for="(val, key) in SORT_RULE_TYPE"
              :key="key"
              :value="key"
              :label="val"
            ></Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button
            size="small"
            class="btn-form-search"
            type="primary"
            @click="toPage(1)"
            >查询</Button
          >
        </FormItem>
      </Form>
    </div>
    <image-action-list
      :data="papers"
      :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>
</template>

<script>
import { paperPageList, subjectList, areaList } 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: [],
      areas: []
    };
  },
  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();
    },
    subjectChange() {
      this.filter.areaCode = "";
      this.getAreaList();
    },
    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 getSubjects() {
      const data = await subjectList(this.filter.workId);
      this.subjects = data.filter(item => item.enable && item.stage === "INIT");
    }
  }
};
</script>
