<template>
  <div class="exam_plan_kw_progress pg-main">
    <div class="pg-title">
      <span>考务下载监控</span>
    </div>
    <div class="pg-select-infos">
      <Form ref="kj_progress_queryform_one" :label-width="80" inline>
        <Row :gutter="20">
          <Col span="10">
            <FormItem label="考试任务" style="width: 100%">
              <Select @on-change="selectExam" v-model="query.examCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.examCodeList"
                  :value="item.examCode"
                  :key="item.examCode"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem label="考点" style="width: 100%">
              <Select v-model="query.placeCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.placeCodeList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem label="是否已下载" style="width: 100%">
              <Select v-model="query.already">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xzList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem label="考点名称" style="width: 100%">
              <Input
                v-model="query.placeName"
                placeholder="考点名称模糊查询"
              ></Input>
            </FormItem>
          </Col>
          <Col span="2">
            <Button @click="doQuery" type="primary" icon="md-search"
              >查询</Button
            >
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs type="card">
      <TabPane label="考务数据">
        <Table
          ref="kw_progress_table_data"
          :columns="columns.kw"
          :data="list.kw"
        ></Table>
        <Page
          placement="top"
          :current="query.kw.pageNo"
          :loading="true"
          :page-size="query.kw.pageSize"
          :total="query.kw.totalElements"
          show-total
          show-sizer
          @on-change="changeKwPageNo"
          @on-page-size-change="changeKwPageSize"
        ></Page>
      </TabPane>
      <TabPane label="试卷数据">
        <Table
          ref="kw_progress_table_paper"
          :columns="columns.paper"
          :data="list.paper"
        ></Table>
        <Page
          placement="top"
          :current="query.paper.pageNo"
          :loading="true"
          :page-size="query.paper.pageSize"
          :total="query.paper.totalElements"
          show-total
          show-sizer
          @on-change="changePaperPageNo"
          @on-page-size-change="changePaperPageSize"
        ></Page>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { axios } from "../../libs/http";
import util from "../../libs/util";

export default {
  name: "exam_plan_kw_progress",
  data() {
    return {
      xldata: {
        examCodeList: [],
        placeCodeList: [],
      },
      list: {
        kw: [],
        paper: [],
      },
      xzList: [
        {
          value: "true",
          name: "是",
        },
        {
          value: "false",
          name: "否",
        },
      ],
      query: {
        examCode: "",
        placeCode: "",
        kw: {
          pageNo: 1,
          pageSize: 10,
          totalElements: 0,
          totalPages: 0,
        },
        paper: {
          pageNo: 1,
          pageSize: 10,
          totalElements: 0,
          totalPages: 0,
        },
        already: "",
        placeName: "",
      },
      columns: {
        kw: [
          {
            type: "index_seq",
            title: "序号",
            align: "center",
            width: 80,
            render: (h, params) => {
              let a =
                (this.query.kw.pageNo - 1) * this.query.kw.pageSize +
                params.index +
                1;
              return h("span", a);
            },
          },
          {
            title: "考点",
            key: "placeName",
            align: "center",
          },
          {
            title: "考场",
            key: "roomName",
            align: "center",
          },
          {
            title: "是否已下载",
            align: "center",
            render: (h, params) => {
              if (params.row.time) {
                return h("i", {
                  props: {
                    "aria-hidden": true,
                  },
                  class: {
                    "fa fa-check": true,
                  },
                  style: {
                    fontSize: "16px",
                  },
                });
              }
            },
          },
          {
            title: "下载时间",
            key: "time",
            align: "center",
            render: (h, params) => {
              if (params.row.time) {
                return h("span", util.dateFormat(params.row.time));
              } else {
                return h("span", "");
              }
            },
          },
        ],
        paper: [
          {
            type: "index_seq",
            title: "序号",
            align: "center",
            width: 80,
            render: (h, params) => {
              let f =
                (this.query.paper.pageNo - 1) * this.query.paper.pageSize +
                params.index +
                1;
              return h("span", f);
            },
          },
          {
            title: "考点",
            key: "placeName",
            align: "center",
          },
          {
            title: "考场",
            key: "roomName",
            align: "center",
          },
          {
            title: "是否已下载",
            align: "center",
            render: (h, params) => {
              if (params.row.time) {
                return h("i", {
                  props: {
                    "aria-hidden": true,
                  },
                  class: {
                    "fa fa-check": true,
                  },
                  style: {
                    fontSize: "16px",
                  },
                });
              }
            },
          },
          {
            title: "下载时间",
            key: "time",
            align: "center",
            render: (h, params) => {
              if (params.row.time) {
                return h("span", util.dateFormat(params.row.time));
              } else {
                return h("span", "");
              }
            },
          },
        ],
      },
    };
  },
  created() {
    let a = this.query.examCode;
    this.xldata.examCodeList = [];
    axios.post("/system/kj/hz/getPlans", {}).then((response) => {
      let data = response.data.data;
      if (data) {
        this.xldata.examCodeList = data;
        this.query.examCode = a;
      }
    });
  },
  methods: {
    selectExam() {
      if (this.query.examCode && this.query.examCode.length > 0) {
        axios
          .post("/system/kj/hz/getPlaceByExamCode", this.query)
          .then((response) => {
            let data = response.data.data;
            if (data) {
              this.xldata.placeCodeList = [];
              this.xldata.placeCodeList = data;
            }
          });
      } else {
        this.xldata.placeCodeList = [];
      }
    },
    loadKwProgress() {
      this.query.kw.examCode = this.query.examCode;
      this.query.kw.placeCode = this.query.placeCode;
      this.query.kw.already = this.query.already;
      this.query.kw.placeName = this.query.placeName;
      this.query.kw.type = "KW";
      console.log("@@@@#query:", this.query);
      axios
        .post("/system/kwProgress/pageQuery", this.query.kw)
        .then((response) => {
          let data = response.data.data;
          if (data) {
            this.list.kw = data.content || [];
            this.query.kw.totalElements = data.totalElements;
            this.query.kw.totalPages = data.totalPages;
          }
        });
    },
    loadPaperProgress() {
      this.query.paper.examCode = this.query.examCode;
      this.query.paper.placeCode = this.query.placeCode;
      this.query.paper.already = this.query.already;
      this.query.paper.placeName = this.query.placeName;
      this.query.paper.type = "PAPER";
      axios
        .post("/system/kwProgress/pageQuery", this.query.paper)
        .then((response) => {
          let data = response.data.data;
          if (data) {
            this.list.paper = data.content || [];
            this.query.paper.totalElements = data.totalElements;
            this.query.paper.totalPages = data.totalPages;
          }
        });
    },
    doQuery() {
      if (!this.query.examCode) {
        this.$Notice.error({
          title: "系统提示",
          desc: "<p>请选择一个考试任务</p>",
        });
        return;
      }
      this.query.kw.pageNo = 1;
      this.query.paper.pageNo = 1;
      this.loadKwProgress();
      this.loadPaperProgress();
    },
    changeKwPageNo(p) {
      //切换页码
      this.query.kw.pageNo = p;
      this.loadKwProgress();
    },
    changeKwPageSize(pageSize) {
      //切换每一页显示多少条
      this.query.kw.pageSize = pageSize;
      this.loadKwProgress();
    },
    changePaperPageNo(p) {
      //切换页码
      this.query.paper.pageNo = p;
      this.loadPaperProgress();
    },
    changePaperPageSize(pageSize) {
      //切换每一页显示多少条
      this.query.paper.pageSize = pageSize;
      this.loadPaperProgress();
    },
  },
};
</script>
