<template>
  <div class="exam_plan_kj_hz 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 @on-change="selectPlace" 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.roomCode">
                <Option value="">全部</Option>
                <Option
                  v-for="item in xldata.roomCodeList"
                  :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>
    <div class="pg-body">
      <Table
        ref="jkd-rz-table"
        :columns="columns"
        :data="list"
        :stripe="true"
        :disabled-hover="true"
      ></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, baseUrl } from "../../libs/http";
import util from "../../libs/util";

export default {
  name: "exam_plan_kj_hz",
  data() {
    return {
      formats: ["qm"],
      xldata: {
        examCodeList: [],
        placeCodeList: [],
        roomCodeList: [],
      },
      query: {
        pageNo: 1,
        pageSize: 10,
        totalElements: 0,
        totalPages: 0,
        examCode: "",
        placeCode: "",
        roomCode: "",
        placeName: "",
      },
      list: [],
      columns: [
        {
          type: "index_seq",
          title: "序号",
          align: "center",
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              (this.query.pageNo - 1) * this.query.pageSize + params.index + 1
            );
          },
        },
        {
          title: "考点",
          key: "placeName",
          minWidth: 200,
        },
        {
          title: "考场",
          key: "roomName",
          width: 140,
        },
        {
          title: "文件名",
          key: "name",
          minWidth: 150,
        },
        {
          title: "文件大小",
          key: "progress",
          width: 100,
          render: (h, params) => {
            if (params.row.size) {
              return h("span", this.formatFileSize(params.row.size));
            } else {
              return "";
            }
          },
        },
        {
          title: "上传时间",
          key: "time",
          width: 190,
          render: (h, params) => {
            if (params.row.time) {
              return h("span", util.dateFormat(params.row.time));
            } else {
              return h("span", "");
            }
          },
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: { type: "primary", size: "small" },
                  on: {
                    click: () => {
                      this.toDownload(params.row);
                    },
                  },
                },
                "下载"
              ),
            ]);
          },
        },
      ],
    };
  },
  methods: {
    selectPlace() {
      if (this.query.placeCode && this.query.placeCode.length > 0) {
        axios
          .post("/system/kj/hz/getRoomByPlaceCode", this.query)
          .then((response) => {
            let data = response.data.data;
            if (data) {
              this.xldata.roomCodeList = [];
              this.xldata.roomCodeList = data;
            }
          });
      } else {
        this.xldata.roomCodeList = [];
      }
    },
    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 = [];
      }
    },
    formatFileSize(size) {
      let fileSize = size != undefined && size != null ? size : 0;
      if (size > 1024 * 1024)
        fileSize =
          (Math.round((size * 100) / (1024 * 1024)) / 100).toString() + "MB";
      else fileSize = (Math.round((size * 100) / 1024) / 100).toString() + "KB";
      return fileSize;
    },
    doQuery() {
      if (!this.query.examCode || this.query.examCode.length == 0) {
        this.query.pageNo = 1;
        this.query.pageSize = 10;
        this.query.totalElements = 0;
        this.query.totalPages = 0;
        this.list = [];
      } else {
        this.query.pageNo = 1;
        this.load();
      }
    },
    changePageNo(p) {
      //切换页码
      this.query.pageNo = p;
      this.load();
    },
    changePageSize(pageSize) {
      //切换每一页显示多少条
      if (this.query.examCode) {
        this.query.pageSize = pageSize;
        this.load();
      }
    },
    load() {
      axios
        .post("/system/clientMonitor/queryLog", 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.$refs["jkd-rz-table"].selectAll(false);
          }
        });
    },
    toDownload(rows) {
      let token =
        "$" +
        this.$store.state.user.accessToken.split("").reverse().join("") +
        "~";
      let url =
        baseUrl +
        "/system/clientMonitor/downloadLog?id=" +
        rows.id +
        "&A-P-T_v_auth=" +
        token;
      window.open(url, "_blank");
    },
  },
  created() {
    let myexamCode = this.query.examCode;
    axios.post("/system/kj/hz/getPlans", {}).then((response) => {
      let data = response.data.data;
      if (data) {
        this.xldata.examCodeList = [];
        data.forEach((item, index) => {
          if (item.examType == "NORMAL" || item.examType == "UTEST") {
            this.xldata.examCodeList.push(item);
            this.query.examCode = myexamCode;
            this.doQuery();
          }
        });
      }
    });
  },
};
</script>
