<template>
  <div id="wjfx_fzjc">
    <div style="width: 100%;float: left;">
      <ul class="uls">
        <li @click="clickButtomTop()">文档列表> </li>
        <li v-for="(item) in trees" @click="clickButtom(item)">{{ item.label + '>' }}</li>
      </ul>
      <ul class="uls uls1">
        <li v-for="(item) in treesChildren" @click="clickButtom(item)" :class="[expandedArr[0]==item.id?'active':'']">{{ item.label }}</li>
      </ul>
      <!-- <div v-for="(item, index) in modules" style="width: 200px;float: left;">
        <el-menu background-color="red" text-color="#fff" active-text-color="#010008">
          <NavMenu :navMenus="item"></NavMenu>
        </el-menu>
      </div> -->
    </div>
    <div style="width: 100%;height: calc(100% - 30px);">
      <div class="left-div">
        <el-input class="public-input" placeholder="输入关键字进行过滤" suffix-icon="el-icon-search"
          v-model="filterText"></el-input>
        <el-tree class="myTree" :data="tree_data" node-key="id" :expand-on-click-node="false"
          :filter-node-method="filterNode" :props="defaultProps" ref="tree" :current-node-key="4"
          :default-expanded-keys="expandedArr" :check-strictly="true" :highlight-current="false" :show-checkbox="true"
          @check="boxOnCheck">
          <!-- @node-click="handleNodeClick" -->
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="first-span" :title="node.label">{{ node.label }}</span>
          </span>
        </el-tree>
        <div class="checkDiv" v-if="checkList.length > 0">
          <div style="width: 100%;font-size: 13px;font-weight: 900;margin-bottom: 10px;">
            <span>当前已选择项：</span>
          </div>
          <div v-for="(item) in checkList" class="checkList">
            <div style="display: flex;align-items: center;">
              <span>{{ item.label }}</span>
              <i class="el-icon-close" style="font-size: 15px;cursor: pointer;margin-left: 3px;"
                @click="deleteBox(item)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="right-div">
        <component :is="currentRole" :clientDetails="clientDetails" ref="mychild" />
      </div>
    </div>
  </div>
</template>
<script>
import { get, post, delete_util } from "../../util/http_util";
import { queryDocumentTree, } from '../../api/xxzp/wxgl';
import XLSX from "xlsx";
import navs from "./znfx.vue";
import NavMenu from "./NavMenu.vue";
// import navs1 from "./znjsfx.vue";
let id = 1000;
export default {
  components: { navs, NavMenu },
  data() {
    return {
      clientDetails: {},
      currentRole: "navs",
      tree_data: [], //左侧树结构的数据
      dialogVisible: false, //新增子节点弹出框
      dialogVisible_edit: false,
      name_edit: '',
      name: "", //新增子节点的名称
      this_data: "",
      this_node: "",
      filterText: "",
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      expandedArr: [4],
      dialogVisibleImport: false,
      title: "",
      pickNew: "",
      tableDataFromExcelHead: [],
      tableDataFromExcel: [],
      module_name: '信息制品文档',
      trees: [],
      treesChildren: [],
      tree: [],
      modules: [],
      checkList: [],
    };
  },
  methods: {
    deleteBox(i) {
      this.checkList = this.checkList.filter(item => item.id != i.id);
      this.$refs.tree.setCheckedKeys(this.checkList.map((item) => { return item.id }));
      this.currentRole = "navs";
      // this.nodeClickList = [node.id];
      this.clientDetails = { type: this.checkList.map((item) => { return item.id }) };
    },
    boxOnCheck(node, data) {
      this.checkList = data.checkedNodes;
      this.currentRole = "navs";
      // this.nodeClickList = [node.id];
      this.clientDetails = { type: data.checkedKeys };
    },
    //查询tree数据
    query_tree() {
      this.tree_data = [];
      queryDocumentTree(this.module_name)
        .then((res) => {
          this.tree_data = [{
            id: 4,
            label: '文档列表',
            level: 0,
            children: res
          }];
          this.tree = res;
          this.treesChildren = res;
          console.log(res)
          // this.modules = [];
          // if (res.length > 0) {
          //   res.forEach(item => {
          //     let arr = [item];
          //     this.modules.push(arr);
          //   })
          // }
          // console.log(this.modules)
          this.currentRole = "navs";
          this.clientDetails = { type: [] };
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    filterNode(value, data) {
      if (value.indexOf('&') > -1) {
        let stringTemp;
        for (let index = 0; index < value.split('&').length; index++) {
          if (value.split('&')[index]) {
            let tmp = data.label.indexOf(value.split('&')[index]) !== -1;
            if (index == 0) {
              stringTemp = tmp;
            } else {
              stringTemp = stringTemp && tmp;
            }
          }
        }
        return stringTemp;
      } else if (value.indexOf('|') > -1) {
        let stringTemp;
        for (let index = 0; index < value.split('|').length; index++) {
          if (value.split('|')[index]) {
            let tmp = data.label.indexOf(value.split('|')[index]) !== -1;
            if (index == 0) {
              stringTemp = tmp;
            } else {
              stringTemp = stringTemp || tmp;
            }
          }
        }
        return stringTemp;
      } else {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },
    clickButtomTop() {
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(4);
      });
      this.currentRole = "navs";
      this.clientDetails = { type: [4] };
      this.expandedArr = [4];
      this.checkList = [];
      this.$refs.tree.setCheckedKeys([]);
    },
    clickButtom(item) {
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(item.id);
      });
      //  this.$refs.tree.setCurrentKey([item.id]);
      this.currentRole = "navs";
      this.clientDetails = { type: [item.id] };
      this.checkList = [item];
      this.$refs.tree.setCheckedKeys(this.checkList.map((item) => { return item.id }));
      this.expandedArr = [item.id];
      // let arr = this.getPathById(this.tree, item.id);
      // if (arr != undefined) {
      //   this.trees = arr.reverse();
      //   this.treesChildren = arr[arr.length - 1].children;
      // } else {
      //   this.trees = [];
      //   this.treesChildren = this.tree;
      // }
      // if (this.trees.length > 0) {
      //   let ars = [];
      //   this.trees.forEach(i => {
      //     ars.push(i.id);
      //   })
      //   this.expandedArr = ars;
      // }
    },
    //节点点击事件
    handleNodeClick(node, data) {
      // let arr = this.getPathById(this.tree, node.id);
      // if (arr != undefined) {
      //   this.trees = arr.reverse();
      //   this.treesChildren = arr[arr.length - 1].children;
      // } else {
      //   this.trees = [];
      //   this.treesChildren = this.tree;
      // }
      // this.currentRole = "navs";
      // this.clientDetails = { type: node.id };
      this.expandedArr = [node.id]
      // if (node.id == 21 || this.getparentNode(data) == 21) {
      //   this.currentRole = "navs";
      //   this.clientDetails = { type: node.id };
      // } else if (node.id == 25 || this.getparentNode(data) == 25) {
      //   this.currentRole = "navs1";
      // } else {
      //   this.currentRole = "";
      // }
    },
    //查询当前节点的最顶层节点ID
    getparentNode(data) {
      if (data.data.parentCode == null) {
        return data.data.id;
      } else {
        return this.getparentNode(data.parent);
      }
    },
    getPathById(list, id) {
      let _that = this;
      for (let i in list) {
        if (list[i].id === id) {

          //查询到就返回该数组对象
          return [list[i]]
        }

        if (list[i].children) {

          let node = _that.getPathById(list[i].children, id)
          if (node !== undefined) {
            //查询到把父节点连起来
            return node.concat(list[i])
          }
        }
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  activated() {
    this.query_tree();
  },
};
</script>
<style lang="scss">
#wjfx_fzjc {
  width: calc(100% - 50px);
  height: calc(100% - 70px);
  margin: 20px;

  .uls {
    list-style: none;

    li {
      padding: 7px 35px;
      float: left;
      cursor: pointer;
      font-size: 14px;
      font-weight: 900;
    }
  }

  .uls1 {
    li {
      background: linear-gradient(to right, #43555c47, #304a5185);
      margin: 0px 10px;
      border-radius: 9px;
    }

    .active {
      background: linear-gradient(to right, #00b6ff75, #304a51db);
    }
  }

  .el-menu {
    border-right: none;
  }

  .left-div {
    width: 15%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    float: left;
    position: relative;

    .checkDiv {
      position: absolute;
      bottom: 10px;
      background: #7f7f7f17;
      display: flex;
      flex-wrap: wrap;
      gap: 7px 12px;
      width: calc(100% - 40px);
      max-height: 90px;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 10px 10px 14px;
    }

    .checkList {
      font-size: 12px;
      padding: 3px 9px;
      background: #5757578f;
    }

    input {
      color: white;
      background-color: transparent;
    }

    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
    }

    .el-button+.el-button {
      margin-left: 0px !important;
    }

    .myTree>.el-tree-node>.el-tree-node__content .el-checkbox {
      display: none;
    }

    .el-tree {
      color: white;
      background: transparent;
      height: calc(100% - 130px);
      margin-top: 10px;

      .el-tree-node__content {
        height: 40px;

        .el-icon-circle-plus {
          display: none;
        }

        .el-icon-error {
          display: none;
        }

        .el-icon-upload {
          display: none;
        }

        .el-icon-edit-outline {
          display: none;
        }

        .list-span {
          display: none;
        }
      }
    }

    .el-tree>.el-tree-node>.el-tree-node__content {
      height: 40px;
      // background-image: url(../../assets/img/yqjc/24.png);
      background-image: url("../../assets/img/dfzy/new/6.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .el-icon-error {
        display: none !important;
      }

      .el-icon-edit-outline {
        display: none !important;
      }

      // .list-span{
      //   display: none !important;
      // }
      // .el-button{
      //   margin-left: -50px;
      // }
    }

    .el-tree>.el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__content {
      height: 40px;
      // background-image: url(../../assets/img/yqjc/24.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__label {
      font-size: 16px !important;
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      padding-right: 8px;
      width: 82%;

      .first-span {
        width: 100%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .list-span {
        position: absolute;
        right: 20px;
      }
    }

    .el-tree>.el-tree-node>.el-tree-node__children {
      // background-color: #1d2d46ad !important;
      width: 100%;
      height: calc(100% - 44px);
      overflow: auto;
      position: relative;

      .el-tree-node {
        // width: 300px;
      }
    }

    .el-tree-node:focus>.el-tree-node__content {
      background-color: #00648a78 !important;
      // border-radius: 5px;
    }

    .el-tree-node__content:hover,
    .el-tree-node__content:focus {
      background-color: #00638a00 !important;

      // border-radius: 5px;
      .el-icon-circle-plus {
        display: block;
      }

      .el-icon-edit-outline {
        display: block;
      }

      .el-icon-error {
        display: block;
      }

      .el-icon-upload {
        display: block;
      }

      .list-span {
        display: block;
      }
    }

    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background-color: #00648a96 !important;
      // border-radius: 5px;
    }

    .el-icon-circle-plus {
      font-size: 16px;
      color: #00a6f5;
    }

    .el-icon-edit-outline {
      font-size: 16px;
      color: #2ae209;
    }

    // .list-span{
    //   // background: #0b4c6dba;
    // }
    .el-icon-error {
      font-size: 16px;
      color: #ff5454;
    }

    .el-icon-upload {
      font-size: 16px;
      color: #2bce0e;
    }
  }

  .right-div {
    width: calc(85% - 10px);
    height: 100%;
    float: left;
    margin-left: 10px;
  }
}
</style>
