<template>
  <div class="exam-plan pg-main">
    <div class="pg-title">
      <span>考试任务管理</span>
    </div>
    <div class="pg-select-infos">
      <Form ref="queryForm_one" :label-width="80" inline>
        <Row>
          <Col span="6">
            <FormItem label="任务类型" :label-width="100" style="width: 100%">
              <Select v-model="query.examType">
                <Option
                  v-for="item in examTypeList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="发布状态" :label-width="100" style="width: 100%">
              <Select v-model="query.examStatus">
                <Option
                  v-for="item in examStatusList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
              label="考试开始时间"
              :label-width="100"
              style="width: 100%"
            >
              <DatePicker
                type="date"
                style="width: 45%"
                v-model="query.startTime"
                placeholder="请选择"
                format="yyyy-MM-dd"
              ></DatePicker>
              至
              <DatePicker
                type="date"
                style="width: 45%"
                v-model="query.endTime"
                placeholder="请选择"
                format="yyyy-MM-dd"
              ></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="任务名称" :label-width="100" style="width: 100%">
              <Input v-model="query.name" placeholder="模糊查询"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <Button
              @click="doQuery"
              style="margin-left: 20px"
              type="primary"
              icon="md-search"
              >查询</Button
            >
            <Button @click="batchRemove" type="error" icon="ios-trash"
              >批量删除</Button
            >
            <Button @click="doAdd" type="primary" icon="md-add"
              >新增考试任务</Button
            >
          </Col>
        </Row>
      </Form>
    </div>
    <div class="pg-body">
      <Table
        @on-selection-change="handleSelectChange"
        ref="table"
        :columns="columns"
        :data="list"
        :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 } from "../../libs/http";
import util from "../../libs/util";

export default {
  name: "exam_plan_index",
  data() {
    return {
      selection: [],
      query: {
        pageNo: 1,
        pageSize: 10,
        totalElements: 0,
        totalPages: 0,
        examType: "",
        examStatus: "",
        startTime: "",
        endTime: "",
        name: "",
      },
      examTypeList: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "通用机考",
          value: "NORMAL",
        },
        {
          name: "视唱机考",
          value: "SOLFEGE",
        },
        {
          name: "优特机考",
          value: "UTEST",
        },
      ],
      examStatusList: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "未发布",
          value: "UN_PUBLISHED",
        },
        {
          name: "已发布",
          value: "PUBLISHED",
        },
      ],
      columns: [
        {
          type: "selection",
          title: "全选",
          width: 60,
        },
        {
          type: "index_seq",
          title: "序号",
          align: "center",
          width: 80,
          render: (h, params) => {
            let a =
              (this.query.pageNo - 1) * this.query.pageSize + params.index + 1;
            return h("span", a);
          },
        },
        {
          title: "任务名称",
          key: "name",
          minWidth: 200,
        },
        {
          title: "任务类型",
          key: "examType",
          width: 150,
          render: (h, params) => {
            let obj = {
              NORMAL: "通用机考",
              SOLFEGE: "视唱机考",
              UTEST: "优特机考",
            };
            if (params.row.examType) {
              return h("span", obj[params.row.examType]);
            } else {
              return h("span");
            }
          },
        },
        {
          title: "考试开始时间",
          key: "startTime",
          width: 130,
          render: (h, params) => {
            if (params.row.startTime) {
              return h("span", util.dateFormat(params.row.startTime));
            } else {
              return h("span", "");
            }
          },
        },
        {
          title: "考试结束时间",
          key: "endTime",
          width: 130,
          render: (h, params) => {
            if (params.row.endTime) {
              return h("span", util.dateFormat(params.row.endTime));
            } else {
              return h("span", "");
            }
          },
        },
        {
          title: "发布状态",
          key: "examStatus",
          width: 150,
          render: (h, params) => {
            if (params.row.examStatus == "UN_PUBLISHED") {
              return h("span", "未发布");
            }
            if (params.row.examStatus == "PUBLISHED") {
              return h("span", "已发布");
            }
            return h("span");
          },
        },
        {
          title: "考试识别码",
          key: "examCode",
          width: 150,
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 190,
          render: (h, params) => {
            if (params.row.createTime) {
              return h("span", util.dateFormat(params.row.createTime));
            } else {
              return h("span", "");
            }
          },
        },
        {
          title: "操作",
          key: "show_more",
          align: "center",
          width: 300,
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: "编辑",
                    placement: "top",
                  },
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        disabled: params.row.examStatus == "PUBLISHED",
                        type: "text",
                      },
                      style: {
                        padding: "0 10px",
                      },
                      on: {
                        click: () => {
                          this.doEdit(params.row);
                        },
                      },
                    },
                    [
                      h(
                        "Icon",
                        {
                          props: {
                            size: "22",
                            type: "ios-create",
                          },
                        },
                        ""
                      ),
                    ]
                  ),
                ]
              ),
              h(
                "Tooltip",
                {
                  props: {
                    content: "删除",
                    placement: "top",
                  },
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        disabled: params.row.examStatus == "PUBLISHED",
                        type: "text",
                      },
                      style: {
                        padding: "0 10px",
                      },
                      on: {
                        click: () => {
                          this.remove(params.row);
                        },
                      },
                    },
                    [
                      h(
                        "Icon",
                        {
                          props: {
                            size: "22",
                            type: "ios-trash",
                          },
                        },
                        ""
                      ),
                    ]
                  ),
                ]
              ),
              h(
                "Tooltip",
                {
                  props: {
                    content: "发布",
                    placement: "top",
                  },
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        disabled: params.row.examStatus == "PUBLISHED",
                        type: "text",
                      },
                      style: {
                        padding: "0 10px",
                      },
                      on: {
                        click: () => {
                          this.publish(params.row);
                        },
                      },
                    },
                    [
                      h(
                        "Icon",
                        {
                          props: {
                            size: "22",
                            type: "ios-redo",
                          },
                        },
                        ""
                      ),
                    ]
                  ),
                ]
              ),
              h(
                "Tooltip",
                {
                  props: {
                    content: "撤销发布",
                    placement: "top",
                  },
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        disabled: params.row.examStatus == "UN_PUBLISHED",
                        type: "text",
                      },
                      style: {
                        padding: "0 10px",
                      },
                      on: {
                        click: () => {
                          this.unpulish(params.row);
                        },
                      },
                    },
                    [
                      h(
                        "Icon",
                        {
                          props: {
                            size: "22",
                            type: "ios-undo",
                          },
                        },
                        ""
                      ),
                    ]
                  ),
                ]
              ),
              h(
                "Tooltip",
                {
                  props: {
                    content: "导出考生数据",
                    placement: "top",
                  },
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "text",
                        loading: params.row.loading,
                      },
                      style: {
                        padding: "0 10px",
                      },
                      on: {
                        click: () => {
                          this.toDownload(params.row);
                        },
                      },
                    },
                    [
                      h(
                        "Icon",
                        {
                          props: {
                            size: "22",
                            type: params.row.loading ? "" : "md-arrow-down",
                          },
                        },
                        ""
                      ),
                    ]
                  ),
                ]
              ),
            ]);
          },
        },
      ],
      list: [],
    };
  },
  computed: {
    avatorImage() {
      return localStorage.avatorImgPath;
    },
  },
  created() {
    let _q = this.$route.query._q;
    if (_q) {
      let query = JSON.parse(_q);
      this.query.pageNo = query.pageNo;
    }
    this.load();
  },
  methods: {
    batchRemove() {
      if (this.selection.length == 0) {
        this.$Notice.error({
          title: "系统提示",
          desc: "<p>请至少选择一个考试任务</p>",
        });
        return;
      }
      let _$ = this;
      let idlist = [];
      for (let i = 0; i < this.selection.length; i++) {
        let row = this.selection[i];
        idlist.push(row.id);
      }
      idlist = idlist.join(",");
      this.$Modal.confirm({
        title: "系统提示",
        content: "是否删除选定的考试任务？",
        onOk() {
          axios
            .post("/system/examPlan/batchDeleteExamPlan", {
              ids: idlist,
            })
            .then((response) => {
              let data = response.data;
              if (data.code == 0) {
                _$.load();
                this.$Notice.success({
                  title: "系统提示",
                  desc: "<p>考试任务删除成功</p>",
                });
              }
            });
        },
      });
    },
    handleSelectChange(selection) {
      this.selection = selection;
    },
    publish(row) {
      let _$ = this;
      this.$Modal.confirm({
        title: "系统提示",
        content: "是否发布此考试任务？",
        onOk() {
          axios
            .post("/system/examPlan/updateExamPlanStatus", {
              id: row.id,
              status: "PUBLISHED",
            })
            .then((response) => {
              let data = response.data;
              if (data.code == 0) {
                _$.load();
                this.$Notice.success({
                  title: "系统提示",
                  desc: "<p>考试任务发布成功</p>",
                });
              }
            });
        },
      });
    },
    unpulish(row) {
      let _$ = this;
      this.$Modal.confirm({
        title: "系统提示",
        content: "一旦撤销后，监考端将无法下载考务数据，是否继续此撤销操作？",
        onOk() {
          axios
            .post("/system/examPlan/updateExamPlanStatus", {
              id: row.id,
              status: "UN_PUBLISHED",
            })
            .then((response) => {
              let data = response.data;
              if (data.code == 0) {
                _$.load();
                this.$Notice.success({
                  title: "系统提示",
                  desc: "<p>考试任务撤销发布成功</p>",
                });
              }
            });
        },
      });
    },
    remove(row) {
      let _$ = this;
      this.$Modal.confirm({
        title: "系统提示",
        content: "是否删除此考试任务？",
        onOk() {
          axios
            .post("/system/examPlan/deleteExamPlan", { id: row.id })
            .then((response) => {
              let data = response.data;
              if (data.code == 0) {
                _$.load();
                this.$Notice.success({
                  title: "系统提示",
                  desc: "<p>考试任务删除成功</p>",
                });
              }
            });
        },
      });
    },
    toDownload(row) {
      if (row.loading) return;
      row.loading = true;
      axios
        .post(
          "/system/examPlan/exam_student_export",
          {
            examCode: row.examCode,
          },
          { responseType: "blob" }
        )
        .then((response) => {
          row.loading = false;
          const filename = `${row.name}-考生数据.xlsx`;
          this.donwloadBlob(new Blob([response.data]), filename);
        })
        .catch(() => {
          row.loading = false;
        });
    },
    donwloadBlob(data, filename) {
      const url = URL.createObjectURL(data);
      const tempLink = document.createElement("a");
      tempLink.style.display = "none";
      tempLink.href = url;
      const fileName = filename || url.split("/").pop().split("?")[0];
      tempLink.setAttribute("download", fileName);
      if (tempLink.download === "undefined") {
        tempLink.setAttribute("target", "_blank");
      }
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
      window.URL.revokeObjectURL(url);
    },
    doEdit(row) {
      if (row.id) {
        this.$router.push({
          name: "exam_plan_edit",
          params: { id: row.id },
          query: { _q: JSON.stringify(this.query) },
        });
      }
    },
    doAdd() {
      this.$router.push({ name: "exam_plan_add" });
    },
    load() {
      axios.post("/system/examPlan/pageQuery", this.query).then((response) => {
        let data = response.data.data;
        if (data) {
          const list = data.content || [];
          this.list = list.map((item) => {
            item.loading = false;
            return item;
          });
          this.query.totalElements = data.totalElements;
          this.query.totalPages = data.totalPages;
          this.$refs.table.selectAll(false);
        }
      });
    },
    doQuery() {
      this.query.pageNo = 1;
      this.load();
    },
    changePageNo(p) {
      //切换页码
      this.query.pageNo = p;
      this.load();
    },
    changePageSize(pageSize) {
      //切换每一页显示多少条
      this.query.pageSize = pageSize;
      this.load();
    },
  },
};
</script>
