<template>
  <div class="exam_plan_student_view pg-main">
    <div class="pg-title">
      <a href="javascript:void(0)" @click="goback" style="float: right"
        ><i class="fa fa-reply" aria-hidden="true"></i>返回</a
      >
      <span>查看考生数据</span>
    </div>
    <div class="pg-select-infos">
      <div style="margin-bottom: 15px">
        <span style="margin-right: 15px">共导入</span>
        <Badge
          :count="total.batchNum"
          overflow-count="1000000"
          class-name="demo-badge-alone"
        ></Badge
        >个批次，
        <Badge
          :count="total.stageNum"
          class-name="demo-badge-alone"
          overflow-count="1000000"
        ></Badge
        >个场次，
        <Badge
          :count="total.examNum"
          class-name="demo-badge-alone"
          overflow-count="1000000"
        ></Badge
        >个考次
      </div>
      <Form ref="student_query_form1" :label-width="80" inline>
        <Row>
          <Col span="11">
            <FormItem label="请选择批次" style="width: 100%">
              <Select @on-change="changeBatch" v-model="query.batchId">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.batchs"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="请选择场次" style="width: 100%">
              <Select v-model="query.stageId">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.stages"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Form ref="student_query_form3" :label-width="80" inline>
        <Row>
          <Col span="11">
            <FormItem label="请选择考点" style="width: 100%">
              <Select @on-change="changePlaceCode" v-model="query.placeCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.places"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="请选择考场" style="width: 100%">
              <Select v-model="query.roomCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.rooms"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Form ref="student_query_form2" :label-width="80" inline>
        <Row>
          <Col span="11">
            <FormItem label="请选择科目" style="width: 100%">
              <Select v-model="query.courseCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.courses"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="关键字查询" style="width: 100%">
              <Input
                v-model="query.queryKey"
                placeholder="准考证号或姓名"
              ></Input>
            </FormItem>
          </Col>
          <Col span="2">
            <Button
              @click="doQuery"
              type="primary"
              icon="md-search"
              style="margin-left: 10px"
              >查询</Button
            >
          </Col>
        </Row>
      </Form>
    </div>
    <div class="pg-body">
      <Table
        ref="student_table"
        :columns="columns"
        :border="true"
        :data="list"
      ></Table>
      <Page
        placement="top"
        :current="query.pageNo"
        :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_student_view",
  data() {
    return {
      last: "",
      total: {
        //汇总数据
        batchNum: 0,
        stageNum: 0,
        examNum: 0,
      },
      xldata: {
        //下拉框数据
        batchs: [],
        stages: [],
        courses: [],
        places: [],
        rooms: [],
      },
      query: {
        //查询对象
        pageNo: 1,
        pageSize: 10,
        totalElements: 0,
        totalPages: 0,
        examCode: "",
        examType: "",
        attachmentId: "",
        batchId: "",
        stageId: "",
        placeCode: "",
        roomCode: "",
        courseCode: "",
        queryKey: "",
      },
      columns: [
        {
          type: "index_seq",
          title: "序号",
          align: "center",
          width: 65,
          render: (h, params) => {
            let a =
              (this.query.pageNo - 1) * this.query.pageSize + params.index + 1;
            return h("span", a);
          },
        },
        {
          title: "准考证号",
          width: 200,
          key: "ticketNo",
          align: "center",
        },
        {
          title: "姓名",
          key: "name",
          minWidth: 150,
          align: "center",
        },
        {
          title: "科目代码",
          key: "courseCode",
          minWidth: 150,
          align: "center",
        },
        {
          title: "科目名称",
          key: "courseName",
          minWidth: 150,
          align: "center",
        },
        {
          title: "考点代码",
          key: "placeCode",
          minWidth: 150,
          align: "center",
        },
        {
          title: "考场代码",
          key: "roomCode",
          minWidth: 150,
          align: "center",
        },
        {
          title: "场次",
          minWidth: 150,
          key: "stageId",
          align: "center",
        },
      ],
      list: [],
    };
  },
  computed: {
    avatorImage() {
      return localStorage.avatorImgPath;
    },
  },
  created() {
    this.query.examCode = this.$route.query.examCode;
    this.query.examType = this.$route.query.examType;
    this.last = this.$route.query.last;
    if (
      this.query.attachmentId &&
      this.query.attachmentId != this.$route.query.attachmentId
    ) {
      this.query.pageNo = 1;
    }
    this.query.attachmentId = this.$route.query.attachmentId;
    if (!this.query.examCode || !this.query.attachmentId) {
      this.$Notice.error({
        title: "系统提示",
        desc: "<p>由于缺少考试识别码或者文件标识导致页面初始化失败</p>",
      });
      return;
    }
    this.xldata = {
      //下拉框数据
      batchs: [],
      stages: [],
      courses: [],
      places: [],
      rooms: [],
    };
    axios.post("/system/examPlan/findAllBatch", this.query).then((response) => {
      let data = response.data.data;
      if (data) {
        this.xldata.batchs = data;
        this.total.batchNum = data.length;
      }
    });
    axios
      .post("/system/examPlan/findAllCourse", this.query)
      .then((response) => {
        let data = response.data.data;
        if (data) {
          this.xldata.courses = data;
        }
      });
    axios.post("/system/examPlan/findAllStage", this.query).then((response) => {
      let data = response.data.data;
      if (data) {
        this.total.stageNum = data.length;
      }
    });
    axios.post("/system/examPlan/findPlace", this.query).then((response) => {
      let data = response.data.data;
      if (data) {
        this.xldata.places = data;
      }
    });
    axios.post("/system/examPlan/findRoom", this.query).then((response) => {
      let data = response.data.data;
      if (data) {
        this.xldata.rooms = data;
      }
    });
    axios
      .post("/system/examPlan/studentPageQuery", this.query)
      .then((response) => {
        let data = response.data.data;
        if (data) {
          this.list = data.content || [];
          this.query.totalElements = data.totalElements;
          this.query.totalPages = data.totalPages;
          this.total.examNum = this.query.totalElements;
        }
      });
  },
  methods: {
    goback() {
      this.$router.push({ name: this.last, query: { _r: true } });
    },
    changeBatch(value) {
      this.query.stageId = null;
      if (value && value.length > 0) {
        axios
          .post("/system/examPlan/findAllStage", this.query)
          .then((response) => {
            let data = response.data.data;
            if (data) {
              this.xldata.stages = data;
            }
          });
      } else {
        this.xldata.stages = [];
      }
    },
    changePlaceCode(value) {
      this.query.roomCode = null;
      if (value && value.length > 0) {
        axios.post("/system/examPlan/findRoom", this.query).then((response) => {
          let data = response.data.data;
          if (data) {
            this.xldata.rooms = data;
          }
        });
      } else {
        this.xldata.rooms = [];
      }
    },
    load() {
      axios
        .post("/system/examPlan/studentPageQuery", this.query)
        .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.pageNo = 1;
      this.load();
    },
    changePageNo(p) {
      //切换页码
      this.query.pageNo = p;
      this.load();
    },
    changePageSize(pageSize) {
      //切换每一页显示多少条
      this.query.pageSize = pageSize;
      this.load();
    },
  },
};
</script>
