<template>
  <div style="display: flex">
    <!-- 设备查询 -->
    <div class="divborder leftDiv">
      <Tree
        class="treeDiv"
        :data="treeList"
        ref="tree"
        @on-select-change="getList()"
      ></Tree>
    </div>
    <div class="rightDiv">
      <div class="divborder newSearchDiv">
        <div class="filter">
          <label>{{ $t("950183") }}：</label>
          <Input v-model="searchObj.keyWord" class="searchInput" clearable />
        </div>
        <div class="filter">
          <label>{{ $t("930134") }}：</label>
          <DatePicker
            type="datetimerange"
            :clearable="true"
            v-model="index_time"
            class="searchInput MaxWidth"
            @on-change="selectdate"
          ></DatePicker>
        </div>
        <div class="searchBtn">
          <Button
            type="primary"
            class="twoWord"
            icon="ios-search"
            @click="tosearch()"
            >{{ this.$t("1001") }}</Button
          >
          <Button
            type="success"
            class="twoWord"
            icon="md-arrow-down"
            @click="downLoad()"
            >{{ this.$t("900758") }}</Button
          >
        </div>
      </div>
      <div class="divborder newTableDiv">
        <Table
          :columns="columns"
          :data="data1"
          @on-current-change="handleRowChange"
          highlight-row
          class="tableClass"
        ></Table>
        <div class="pageDiv">
          <div class="pageDirection">
            <Page
              :total="total"
              :current="page"
              @on-change="changePage"
              show-elevator
              show-sizer
              show-total
              @on-page-size-change="handlePageSize"
              :page-size-opts="[10, 20, 30, 40, 100]"
            ></Page>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
import moment from "moment";
export default {
  data() {
    return {
      searchObj: { keyWord: "" },
      index_time: [],
      data1: [], // table 表格数据
      total: 0,
      page: 1, // 当前页码值
      pagesize: 10, // 每一页展示数据
      obj: {},
      dateTime: [
        moment(new Date().getTime() - 3600 * 1000 * 24 * 1).format(
          "YYYY-MM-DD "
        ) + "00:00:00",
        moment(new Date().getTime()).format("YYYY-MM-DD ") + "23:59:59",
      ],
      columns: [
        {
          type: "sort",
          title: this.$t("1008"),
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
        },
        {
          title: this.$t("100308"),
          key: "machine_name",
        },
        {
          title: this.$t("930136"),
          key: "document_name",
        },
        {
          title: this.$t("900754"),
          key: "type_name",
        },
        {
          title: this.$t("930133"),
          key: "version",
        },
        {
          title: this.$t("930134"),
          key: "downtime",
        },
        {
          title: this.$t("930135"),
          key: "signtime",
        },
        {
          title: this.$t("8081"),
          key: "recovertime",
        },
        {
          title: this.$t("200054"),
          key: "status",
          render: (h, params) => {
            let statusText;
            if (params.row.status == 1) {
              statusText = this.$t(300092);
            } else if (params.row.status == 2) {
              statusText = this.$t(300092);
            } else if (params.row.status == 3) {
              statusText = this.$t(300093);
            } else if (params.row.status == 4) {
              statusText = this.$t(300094);
            }
            return h("div", {
              domProps: {
                innerHTML: statusText,
              },
            });
          },
        },
      ],
    };
  },
  created() {
    //  获取树形图结构
    this.$store.dispatch("getTree");
    this.columns = this.$time.initTableTitle(this.columns);
  },
  computed: {
    treeList() {
      return this.$store.state.app.tree;
    },
  },
  methods: {
    selectdate(e) {
      this.index_time = [e[0], e[1]];
      let dtStart = e[0];
      let dtEnd = e[1];
      let last_str = dtEnd.substring(11);
      if (last_str == "00:00:00") {
        dtEnd = moment(dtEnd).format("YYYY-MM-DD") + " 23:59:59";
        this.index_time = [dtStart, dtEnd];
      }
    },
    // 获取id
    getList() {
      let node = this.$refs.tree.getSelectedNodes();
      if (node.length > 0) {
        this.treenode = node[0];
        this.tosearch();
      }
    },
    tosearch() {
      this.page = 1;
      this.pagesize = 10;
      this.search();
    },
    search() {
      this.obj = {}; // 清空
      // console.log(this.index_time);
      if (!this.treenode || !this.treenode.value) {
        // 请选择设备
        this.$Message.error(this.$t("700071"));
        return false;
      }
      // 请选择具体工位
      if (this.treenode.children.length > 0) {
        this.$Message.error(this.$t("100128"));
        return false;
      }
      this.searchObj.sectionid = this.treenode.id;
      // 对this.index_time 做判断
      if (
        this.index_time[0] === null ||
        this.index_time[0] === "" ||
        this.index_time[1] === null ||
        this.index_time[1] === ""
      ) {
        this.searchObj.starttime = "";
        this.searchObj.endtime = "";
      } else {
        this.searchObj.starttime = moment(this.index_time[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.searchObj.endtime = moment(this.index_time[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      // console.log(this.searchObj.starttime,this.searchObj.endtime)
      this.searchObj.page = this.page;
      this.searchObj.pagesize = this.pagesize;
      let data = {
        page: this.page,
        pagesize: this.pagesize,
        section_id: this.treenode.value,
        keyword: this.searchObj.keyWord,
        starttime: this.searchObj.starttime,
        endtime: this.searchObj.endtime,
      };
      this.axios
        .request({
          url: "/esop/EsopDocumentSearch/SearchMachinePagedBindings",
          params: data,
          method: "get",
        })
        .then((res) => {
          if (res.data.ret === 1) {
            this.total = 0;
            this.data1 = [];
            if (res.data.data != null && res.data.data.length !== 0) {
              this.total = res.data.total;
              this.data1 = res.data.data;
            } else {
              this.data1 = [];
            }
          } else {
            this.data1 = [];
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 监听下载事件
    downLoad() {
      if (
        this.obj.id == "" ||
        this.obj.id == undefined ||
        this.obj.id == null
      ) {
        this.$Message.error(this.$t("930139"));
        return false;
      }
      if (
        this.obj.file_url === null ||
        this.obj.file_url === undefined ||
        this.obj.file_url === ""
      ) {
        this.$Message.error(this.$t("9000147"));
        return false;
      }
      var url =
        axios.publicPath +
        "esop/Download/DownloadFile?id=" +
        this.obj.document_id;
      var file_name = this.obj.file_name;
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.setRequestHeader("token", localStorage.getItem("token"));
      xhr.setRequestHeader("timestamp", localStorage.getItem("timestamp"));
      xhr.setRequestHeader("sign", localStorage.getItem("sign"));
      xhr.setRequestHeader("nonce", localStorage.getItem("nonce"));
      xhr.onload = function () {
        if (this.status === 200) {
          var blob = this.response;
          // let blob = new Blob([this.response], {type: "application/vnd.ms-excel"});
          var a = document.createElement("a");
          a.download = file_name;
          a.href = window.URL.createObjectURL(blob);
          a.click();
        } else {
          this.$Message.error(this.$t(1097));
          return false;
        }
      };
      xhr.send();
    },
    // table 表格切换数据
    handleRowChange(currentRow, oldCurrentRow) {
      this.obj = currentRow;
    },
    // 页码改变的回调, 返回改变以后页码值
    changePage(value) {
      this.page = value;
      this.data1 = this.search();
    },
    // 切换每页条数时回调, 返回切换以后每页条数
    handlePageSize(value) {
      this.pagesize = value;
      this.data1 = this.search();
    },
  },
};
</script>

<style lang="less" scoped>
</style>
