<template>
  <div class="exam_plan_progress pg-main">
    <div class="pg-title">
      <span>考试进度查询</span>
    </div>
    <div class="pg-select-infos">
      <Form ref="student_query_form1" :label-width="80" inline>
        <Row :gutter="20">
          <Col span="8">
            <FormItem label="任务名称" style="width: 100%">
              <Select v-model="query.examCode" @on-change="examChange">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.exams"
                  :value="item.code"
                  :key="item.code"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="批次" style="width: 100%">
              <Select v-model="query.batchId" @on-change="batchChange">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.batchs"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="场次" style="width: 100%">
              <Select v-model="query.stageId" @on-change="stageChange">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.stages"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="8">
            <FormItem label="考点" style="width: 100%">
              <Select v-model="query.placeCode" @on-change="placeChange">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.places"
                  :value="item.code"
                  :key="item.code"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="考场" style="width: 100%">
              <Select v-model="query.roomCode" @on-change="roomChange">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.rooms"
                  :value="item.code"
                  :key="item.code"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="科目" style="width: 100%">
              <Select v-model="query.courseCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.courses"
                  :value="item.code"
                  :key="item.code"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="20">
          <Col span="8">
            <FormItem label="检录状态" style="width: 100%">
              <Select v-model="query.registrationStatus">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.registrations"
                  :value="item.code"
                  :key="item.code"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="考试状态" style="width: 100%">
              <Select v-model="query.examFinishStatus">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.finishStates"
                  :value="item.code"
                  :key="item.code"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="关键字" style="width: 100%">
              <Input
                v-model="query.examStudentParams"
                placeholder="姓名/准考证号"
              >
              </Input>
            </FormItem>
          </Col>
        </Row>
        <FormItem>
          <Button @click="doQuery" type="primary" icon="md-search">查询</Button>
        </FormItem>
      </Form>
    </div>
    <div class="pg-body">
      <div class="pg-total-infos">
        <span>应考：{{ total.totalTimes }}科次</span>
        <span>完成率：{{ total.finishRate }}%</span>
        <span>已检录：{{ total.registrationTotalTimes }}科次</span>
        <span>检录通过：{{ total.registrationPassTimes }}科次</span>
        <span>检录不通过：{{ total.registrationNoPassTimes }}科次</span>
        <span>已完成考试：{{ total.realityTimes }}科次</span>
        <!-- <span>违纪：{{ total.examStudentCheatTimes }}科次</span>
                <span>缺考：{{ total.examStudentAbsentTimes }}科次</span> -->
      </div>
      <Table
        ref="student_table"
        :columns="columns"
        :border="true"
        :data="list"
      ></Table>
      <Page
        placement="top"
        :current="query.pageNumber"
        :loading="true"
        :page-size="query.pageSize"
        :total="query.totalElements"
        show-total
        show-sizer
        @on-change="changePageNo"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
  </div>
</template>

<script>
import { axios } from "../../libs/http";
export default {
  name: "exam_plan_progress",
  data() {
    return {
      last: "",
      total: {
        totalTimes: 0, // 应考科次
        realityTimes: 0, // 实考科次
        finishRate: 0, // 完成率 = 实考科次/应考科次
        registrationTotalTimes: 0, // 已检录科次
        registrationPassTimes: 0, // 检录通过科次
        registrationNoPassTimes: 0, // 检录不通过科次
        examStudentCheatTimes: 0, // 违纪科次（前端不展示）
        examStudentAbsentTimes: 0, // 缺考科次（前端不展示）
      },
      xldata: {
        //下拉框数据
        exams: [],
        batchs: [],
        stages: [],
        courses: [],
        places: [],
        rooms: [],
        registrations: [],
        finishStates: [],
      },
      query: {
        //查询对象
        pageNumber: 1,
        pageSize: 10,
        totalElements: 0,
        totalPages: 0,
        examCode: "",
        batchId: "",
        stageId: "",
        placeCode: "",
        roomCode: "",
        courseCode: "",
        registrationStatus: "",
        examFinishStatus: "",
        examStudentParams: "",
      },
      columns: [
        {
          type: "index_seq",
          title: "序号",
          width: 70,
          render: (h, params) => {
            let a =
              (this.query.pageNumber - 1) * this.query.pageSize +
              params.index +
              1;
            return h("span", a);
          },
        },
        {
          title: "任务名称",
          key: "examName",
          minWidth: 200,
        },
        {
          title: "批次",
          key: "batchName",
          width: 100,
        },
        {
          title: "场次",
          key: "stageId",
          width: 80,
        },
        {
          title: "考点（代码）",
          key: "courseName",
          minWidth: 130,
          render: (h, params) => {
            return h(
              "span",
              `${params.row.placeName}（${params.row.placeCode}）`
            );
          },
        },
        {
          title: "考场（代码）",
          key: "roomCode",
          minWidth: 130,
          render: (h, params) => {
            return h(
              "span",
              `${params.row.roomName}（${params.row.roomCode}）`
            );
          },
        },
        {
          title: "姓名",
          key: "examStudentName",
          width: 100,
        },
        {
          title: "科目（代码）",
          key: "roomCode",
          minWidth: 130,
          render: (h, params) => {
            return h(
              "span",
              `${params.row.courseName}（${params.row.courseCode}）`
            );
          },
        },
        {
          title: "检录状态",
          key: "registrationStatus",
          width: 100,
        },
        {
          title: "考试状态",
          key: "examStatus",
          width: 100,
        },
      ],
      list: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    goback() {
      this.$router.push({ name: this.last, query: { _r: true } });
    },
    getDict(type, data) {
      return axios
        .post("/system/exam_progress/find_exam_condition_cascade", {
          ...data,
          examConditionEnum: type,
        })
        .then((response) => {
          return response ? response.data.data : [];
        });
    },
    examChange() {
      this.query.batchId = "";
      this.getBatchs();
      this.query.stageId = "";
      this.getStages();
      this.query.placeCode = "";
      this.getPlaces();
      this.query.roomCode = "";
      this.getRooms();
      this.query.courseCode = "";
      this.getCourses();
    },
    batchChange() {
      this.query.stageId = "";
      this.getStages();
      this.query.courseCode = "";
      this.getCourses();
    },
    stageChange() {
      this.query.courseCode = "";
      this.getCourses();
    },
    placeChange() {
      this.query.roomCode = null;
      this.getRooms();
      this.query.courseCode = "";
      this.getCourses();
    },
    roomChange() {
      this.query.courseCode = "";
      this.getCourses();
    },
    async initData() {
      await this.getExams();
      this.query.examCode = this.xldata.exams[0] && this.xldata.exams[0].code;
      this.getTotal();
      this.doQuery();
      this.examChange();
      this.getRegistration();
      this.getFinishStates();
    },
    getTotal() {
      if (!this.query.examCode) {
        this.total = {
          totalTimes: 0,
          realityTimes: 0,
          finishRate: 0,
          registrationTotalTimes: 0,
          registrationPassTimes: 0,
          registrationNoPassTimes: 0,
          examStudentCheatTimes: 0,
          examStudentAbsentTimes: 0,
        };
        return;
      }
      // 统计数据
      axios
        .post("/system/exam_progress/find_exam_progress_statistic", {
          examCode: this.query.examCode,
        })
        .then((response) => {
          let data = response.data.data;
          if (data) {
            this.total = data;
          }
        });
    },
    async getExams() {
      const data = await this.getDict("EXAM_PLAN", {});
      this.xldata.exams = data;
    },
    async getBatchs() {
      this.xldata.batchs = [];
      if (!this.query.examCode) return;
      const data = await this.getDict("EXAM_BATCH", {
        examCode: this.query.examCode,
      });
      this.xldata.batchs = data;
    },
    async getStages() {
      this.xldata.stages = [];
      if (!this.query.batchId) return;
      const data = await this.getDict("EXAM_STAGE", {
        examCode: this.query.examCode,
        batchId: this.query.batchId,
      });
      this.xldata.stages = data;
    },
    async getPlaces() {
      this.xldata.places = [];
      if (!this.query.examCode) return;
      const data = await this.getDict("EXAM_PLACE", {
        examCode: this.query.examCode,
      });
      this.xldata.places = data;
    },
    async getRooms() {
      this.xldata.rooms = [];
      if (!this.query.placeCode) return;
      const data = await this.getDict("EXAM_ROOM", {
        examCode: this.query.examCode,
        placeCode: this.query.placeCode,
      });
      this.xldata.rooms = data;
    },
    async getCourses() {
      this.xldata.courses = [];
      const data = await this.getDict("EXAM_COURSE", {
        examCode: this.query.examCode,
        batchId: this.query.batchId,
        stageId: this.query.stageId,
        placeCode: this.query.placeCode,
        roomCode: this.query.roomCode,
      });
      this.xldata.courses = data;
    },
    async getRegistration() {
      this.xldata.registrations = [];
      const data = await this.getDict("REGISTRATION_STATUS", {});
      this.xldata.registrations = data;
    },
    async getFinishStates() {
      this.xldata.finishStates = [];
      const data = await this.getDict("EXAM_FINISH_STATUS", {});
      this.xldata.finishStates = data;
    },
    load() {
      const datas = { ...this.query };

      axios
        .post("/system/exam_progress/find_exam_progress_page", datas)
        .then((response) => {
          let data = response.data.data;
          if (data) {
            this.list = data.content || [];
            this.query.totalElements = data.totalElements;
            this.query.totalPages = data.totalPages;
          }
        });
    },
    doQuery() {
      this.query.pageNumber = 1;
      this.load();
      this.getTotal();
    },
    changePageNo(p) {
      //切换页码
      this.query.pageNumber = p;
      this.load();
    },
    changePageSize(pageSize) {
      //切换每一页显示多少条
      this.query.pageSize = pageSize;
      this.load();
    },
  },
};
</script>
