<template>
  <div class="inspection-collect-logs">
    <div class="part-box-head">
      <div class="part-box-head-right">
        <Button type="primary" icon="md-download" @click="exportLogs"
          >导出操作日志</Button
        >
      </div>
    </div>
    <div class="part-box">
      <Form ref="FilterForm" label-position="left" inline>
        <FormItem label="工作文件夹：">
          <Select
            v-model="filter.workId"
            placeholder="请选择工作文件夹"
            style="width: 150px"
            @on-change="workChange"
          >
            <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="考号：">
          <Input
            v-model.trim="filter.examNumber"
            placeholder="请输入考号"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="姓名：">
          <Input
            v-model.trim="filter.name"
            placeholder="请输入姓名"
            clearable
          ></Input>
        </FormItem>
        <FormItem label="采集账号：">
          <Select
            v-model="filter.createUserId"
            placeholder="请选择操作"
            clearable
            style="width: 130px"
          >
            <Option
              v-for="(user, uindex) in collectionUsers"
              :key="uindex"
              :value="user.id"
              :label="user.name"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="查询时间：">
          <DatePicker
            v-model="searchTime"
            type="datetimerange"
            placeholder="请选择查询时间段"
            style="width: 400px"
            transfer
          ></DatePicker>
        </FormItem>
        <FormItem>
          <Button type="primary" icon="ios-search" @click="toPage(1)"
            >查询</Button
          >
        </FormItem>
      </Form>

      <Table
        ref="TableList"
        :columns="columns"
        :data="dataList"
        disabled-hover
        border
      ></Table>

      <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 {
  inspectionCollectLogPageList,
  workList,
  clientUserPageList
} from "@/api";

export default {
  name: "inspection-collect-logs",
  data() {
    return {
      filter: {
        workId: 33,
        subject: "SC",
        examNumber: "",
        name: "",
        createUserId: null,
        startTime: null,
        endTime: null
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      works: [],
      collectionUsers: [],
      searchTime: [],
      dataList: [],
      columns: [
        {
          title: "工作",
          key: "workName"
        },
        {
          title: "科目",
          key: "subject"
        },
        {
          title: "学生姓名",
          key: "studentName"
        },
        {
          title: "准考证号",
          key: "examNumber",
          width: 130
        },
        {
          title: "采集账号",
          key: "createUserName"
        },
        {
          title: "上传时间",
          key: "createTime"
        },

        {
          title: "识别方式",
          key: "remark"
        },
        {
          title: "登录时间",
          key: "loginTime"
        }
      ]
    };
  },
  mounted() {
    this.getWorkList();
    this.getList();
  },
  methods: {
    async getCollectionUsers(workId) {
      this.collectionUsers = await clientUserPageList({ workId });
    },
    async getWorkList() {
      const data = await workList();
      this.works = data.map(item => {
        return {
          id: item.id,
          name: item.name
        };
      });
    },
    workChange() {
      this.getCollectionUsers(this.filter.workId);
    },
    async getList() {
      // const [startTime, endTime] = this.searchTime;
      const datas = {
        // ...this.filter,
        // startTime,
        // endTime,
        curPage: this.current - 1,
        pageSize: this.size
      };
      const data = await inspectionCollectLogPageList(datas);
      this.dataList = data.data;
      this.total = data.totalCount;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    exportLogs() {}
  }
};
</script>
