<template>
  <div class="testdiv">
    <!-- 文档配置 -->
    <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="searchBtn">
          <Button
            type="primary"
            class="fourWord"
            icon="md-arrow-down"
            @click="docuIssue()"
            >{{ this.$t("800324") }}</Button
          >
          <Button
            type="success"
            class="fourWord"
            icon="md-arrow-back"
            @click="docuRecycle()"
            >{{ this.$t("800326") }}</Button
          >
        </div>
      </div>
      <div class="divborder newTableDiv">
        <Table
          highlight-row
          :columns="codeColumns"
          :data="data1"
          @on-current-change="handleRowChange"
          @on-row-click="onExpand"
          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>

    <!-- 文档下发弹框 -->
    <Modal
      :title="$t(800324)"
      v-model="docuIssueModal"
      :loading="loading"
      :styles="{ width: '680px' }"
      class="newModalClass"
      @on-cancel="cancel"
    >
      <div class="modal_header">
        <!-- 检索文档 -->
        <div class="filter searchdocu">
          <label>{{ $t(100406) }}：</label>
          <Input
            clearable
            id="input1"
            type="text"
            v-model="document"
            class="searchInput"
          />
        </div>
        <div class="searchBtn">
          <Button
            type="primary"
            class="twoWord"
            icon="ios-search"
            @click="IssuedSearch()"
            >{{ $t("1001") }}</Button
          >
        </div>
      </div>
      <div class="divborder newTableDiv manageTable">
        <Table
          class="tableClass"
          highlight-row
          :data="tableData"
          :columns="tableColumns"
          :max-height="260"
          @on-current-change="handleIssueRowChange"
        ></Table>
      </div>
      <!-- 文档下发说明 -->
      <div class="filter docuinstruc">
        <label>{{ $t(800325) }}：</label>
        <Input
          clearable
          id="input1"
          type="text"
          v-model="description"
          class="searchInput"
        />
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancel()">{{
          $t("1033")
        }}</Button>
        <Button type="primary" size="large" @click="saveData()">{{
          $t("900552")
        }}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      codeColumns: [
        {
          title: this.$t("1008"),
          key: "order",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 70
        },
        {
          title: this.$t("900752"),
          key: "name"
        },
        {
          title: this.$t("900754"),
          key: "type_name"
        },
        {
          title: this.$t("930133"),
          key: "version"
        },
        {
          title: this.$t("700009"),
          key: "upload_time"
        },
        {
          title: this.$t("700010"),
          key: "upload_user"
        },
        {
          title: this.$t("800041"),
          key: "remark"
        },
        {
          title: this.$t("940014"),
          render: (h, params) => {
            let statusText;
            if (params.row.is_sign == 0) {
              statusText = "否";
            } else if (params.row.is_sign == 1) {
              statusText = "是";
            }
            return h("div", {
              domProps: {
                innerHTML: statusText
              }
            });
          }
        }
      ],
      tableColumns: [
        {
          title: this.$t("1008"),
          key: "order",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 70,
          align: "center"
        },
        {
          title: this.$t("900752"),
          key: "file_name"
        },
        {
          title: this.$t("900754"),
          key: "type_name"
        },
        {
          title: this.$t("930133"),
          key: "version"
        },
        {
          title: this.$t("700135"),
          key: "uploader"
        }
      ],
      data1: [], // table 表格数据
      detailobj: {},
      Issuedetailobj: {},
      total: 0,
      page: 1, // 当前页码值
      pagesize: 10, // 每一页展示数据
      docuIssueModal: false, // 文档下发弹框
      loading: true,
      document: "", //  检索文档
      description: "", //  文档下发说明
      tableData: [], //
      cid: ""
    };
  },
  created() {
    //  获取树形图结构
    this.$store.dispatch("getTree");
    this.codeColumns = this.$time.initTableTitle(this.codeColumns);
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
  },
  computed: {
    treeList() {
      return this.$store.state.app.tree;
    }
  },
  methods: {
    // 获取id
    getList() {
      let node = this.$refs.tree.getSelectedNodes();
      if (node.length > 0) {
        if (node[0].children.length > 0) {
          this.$Message.error(this.$t(100128));
          return false;
        } else {
          var id = node[0].value;
          this.cid = node[0].value;
          this.getMachineInfo();
        }
      }
    },
    // 获取设备信息
    getMachineInfo() {
      this.detailobj = {};
      let data = {
        section_id: this.cid,
        page: this.page,
        pagesize: this.pagesize
      };
      this.axios
        .request({
          url: "/esop/EsopDocumentBinding/GetMachinePagedBindings",
          params: data,
          methods: "get"
        })
        .then(res => {
          this.total = 0;
          this.data1 = [];
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.data1 = res.data.data;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 监听文档下发事件
    docuIssue() {
      // 非空判断
      if (this.cid == "" || this.cid == undefined) {
        this.$Message.error(this.$t("600666"));
        return false;
      } else {
        this.docuIssueModal = true; // 文档下发弹显示
        this.document = ""; // 检索文档置空
        this.description = ""; // 文档说明置空
        this.IssuedSearch();
      }
    },
    // 监听搜索按钮事件
    IssuedSearch() {
      let params = {
        name: this.document
      };
      this.axios
        .request({
          url: "/esop/EsopDocumentCreate/GetDocumentsByType",
          params,
          method: "get"
        })
        .then(res => {
          this.tableData = [];
          if (res.data.ret === 1 && res.data.data.length !== 0) {
            this.tableData = res.data.data;
          } else {
            this.$Message.error(this.$t("1000"));
          }
        });
    },
    // 监听弹框确认事件
    saveData() {
      if (this.tableData.length === 0) {
        this.$Message.error(this.$t(100400));
        return false;
      }
      if (
        this.Issuedetailobj.id === "" ||
        this.Issuedetailobj.id === undefined ||
        this.Issuedetailobj.id === null
      ) {
        this.$Message.error(this.$t(100400));
        return false;
      }
      // 组装请求参数
      let data = {
        document_id: this.Issuedetailobj.id,
        section_id: this.cid,
        remark: this.description // 下发说明
      };
      this.axios
        .request({
          url: "/esop/EsopDocumentBinding/RequestUpdateOneDocument",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.docuIssueModal = false; // 隐藏
            this.$Message.success("文档下发成功"); // 提示
            this.tableData = [];
            this.document = ""; // 检索文档置空
            this.description = ""; // 文档说明置空
            this.page = 1;
            this.pagesize = 10;
            this.Issuedetailobj = {};
            this.getMachineInfo();
          } else {
            this.$Message.error(this.$t(res.data.msg+"")); // 提示
          }
        });
    },
    // 监听弹框取消
    cancel() {
      this.docuIssueModal = false;
      this.tableData = []; // 表格数组置空
      this.document = ""; //  检索文档置空
      this.description = ""; //  文档说明置空
    },
    // 监听文档回收事件
    docuRecycle() {
      if (this.cid === "" || this.cid === null || this.cid === undefined) {
        this.$Message.warning(this.$t("9000416"));
        return false;
      }
      if (
        this.detailobj.id == undefined ||
        this.detailobj.id == "" ||
        this.detailobj.id === 0
      ) {
        this.$Message.error(this.$t("100400"));
        return false;
      } else {
        this.$Modal.confirm({
          title: this.$t("1223"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1222"),
          onOk: () => {
            let params = { id: this.detailobj.id };
            axios
              .request({
                url: "/esop/EsopDocumentBinding/RecoverDocument",
                params,
                method: "post"
              })
              .then(res => {
                if (res.data.ret === 1) {
                  this.$Message.success(this.$t("1224"));
                  this.page = 1;
                  this.getMachineInfo(); // 刷新列表
                } else {
                  this.$Message.error(this.$t(res.data.msg));
                }
              });
          }
        });
      }
    },
    // 开启 highlight-row 后有效, 当表格的当前行发生变化的时候会触发
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    // 单击某一行时触发
    onExpand() {},
    changePage(value) {
      this.page = value;
      this.data1 = this.getMachineInfo();
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.data1 = this.getMachineInfo();
    },
    // 开启 highlight-row 后有效, 当表格的当前行发生变化的时候会触发
    handleIssueRowChange(currentRow, oldCurrentRow) {
      this.Issuedetailobj = currentRow;
    }
  }
};
</script>

<style lang="less" scoped>
.manageTable {
  margin-right: 40px;
}
.modal_header {
  display: flex;
  justify-items: flex-start;
}
.searchdocu {
  margin-left: -35px;
}
.docuinstruc {
  margin-left: -12px;
}
</style>
