<template>
    <div id="xdzy">
        <div class="left-div">
            <el-input class="public-input" placeholder="输入关键字进行过滤" suffix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-tree :data="tree_data" node-key="id" :expand-on-click-node="false" :filter-node-method="filterNode" highlight-current :props="defaultProps" ref="tree" :default-expanded-keys="[0,1]" @node-click="handleNodeClick" :indent=1>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span class="first-span" :title="node.label">{{ node.label }}</span>
                    <!-- <span class="list-span">
            <el-button
              type="text"
              size="mini"
              @click="() => append(node, data)"
            >
              <i class="el-icon-circle-plus" title="添加子节点"></i>
            </el-button>
            <el-button type="text" size="mini" @click="() => edit(node, data)">
              <i class="el-icon-edit-outline" title="编辑机构"></i>
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              <i class="el-icon-error" title="删除子节点"></i>
            </el-button>
            <el-button
              class="import"
              type="text"
              size="mini"
              :style="{
                display: getparentNode(node) == 25 ? '' : 'none !important',
              }"
            >
              <i class="el-icon-upload" @click="importExcelData(data)"></i>
            </el-button> -->
                    <!-- </span> -->
                </span>
            </el-tree>
        </div>
        <div class="right-div">
            <component :is="currentRole" ref="mychild" />
        </div>
    </div>
</template>
<script>
import navs from "./xdzylb.vue";
import { queryQuestionTree } from "../../api/resource"
// import navs1 from "./znjsfx.vue";
let id = 1000;
export default {
    components: { navs },
    data() {
        return {
            // clientDetails: {},
            currentRole: "navs",
            tree_data: [], //左侧树结构的数据
            filterText: "",
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            module_name: '辅助决策文档',
        };
    },
    methods: {
        //查询tree数据
        query_tree() {
            queryQuestionTree().then(res => {
                let top = {
                    children: res,
                    code: null,
                    id: 0,
                    level: 0,
                    label: '作业树',
                    parentCode: null,
                };
                this.tree_data = [top];
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //节点点击事件
        handleNodeClick(node, data) {
            this.currentRole = "navs";
            // this.clientDetails = { type: node.id };
            this.$refs.mychild.searchs(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);
        //   }
        // },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    activated() {
        this.query_tree();
    },
};
</script>
<style lang="scss">
#xdzy {
  width: calc(100% - 50px);
  height: calc(100% - 70px);
  margin: 20px;
  .left-div {
    width: 15%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    float: left;
    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;
    }
    .el-tree {
      color: white;
      background: transparent;
      height: calc(100% - 50px);
      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: #00638a50 !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>
