<template>
  <div id="commonTree">
    <el-input class="inputFilterClass float_l" @input="changeInput" maxlength="15"
              placeholder="输入关键字进行过滤"
              size="mini"
              v-model="filterText"

    >
    </el-input>
    <el-scrollbar>
      <div class='myTree'>
        <el-tree
          :filter-node-method="filterNode"
          :load="loadNode"
          :node-key="props.value"
          :props="props"
          @node-click="handleNodeClick"
          :indent="0"
          class="filter-tree"
          highlight-current
          lazy
          ref="treeSelect">
                       <span class="span-ellipsis" slot-scope="{ node, data }">
<!--                           <span :title="node.label">{{ node.label }}</span>-->
                           <qp-tooltip :text="node.label" fontSize="12px"></qp-tooltip>
                        </span>
        </el-tree>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import {getTreeNode} from '../../assets/js/commonUtil';

  import QpTooltip from '../mainView/QpTooltip.vue'


  export default {
    components: {
      QpTooltip
    },
    name: "commonTree",
    props: {},
    data() {
      return {
        props: {
          value: 'ID',             // ID字段名
          label: 'NAME',
          isLeaf: 'isleaf'
        },
        filterText: '',
        header:'',
        // header:'AjQxMTABAAlQMzExNzU2NTcCAAADAAAEAA4yMDIwMDczMTA2NDc0MAUABAAnjQAHAAQAAAABCgAfUDMxMTc1NjU3MTU5NjE3ODA2MDI5OTEwNjQwMTM1Mv8BnjCCAZoGCSqGSIb3DQEHAqCCAYswggGHAgEBMQswCQYFKw4DAhoFADALBgkqhkiG9w0BBwExggFmMIIBYgIBATBjMFsxCzAJBgNVBAYTAmNuMQswCQYDVQQIEwJ6ajELMAkGA1UEBxMCaHoxDzANBgNVBAoTBkh1YXl1bjENMAsGA1UECxMEY2lzcDESMBAGA1UEAxMJbG9jYWxob3N0AgQ/g56HMAkGBSsOAwIaBQCgXTAYBgkqhkiG9w0BCQMxCwYJKoZIhvcNAQcBMBwGCSqGSIb3DQEJBTEPFw0yMDA3MzEwNjQ3NDBaMCMGCSqGSIb3DQEJBDEWBBR6Yfm+eHgnbHcWkqMl7d3ZnRmcTjALBgkqhkiG9w0BAQUEgYBfhPgIxgvscAl+KHNzHs4tNx6DLSEqGZuwA9P5glic9wlAf19MeNTjeLhWjmu7M8aWcs8xy4etHA2wX+ZrG1r4u51qYHtm4BIbYvA6AITDCOfGCTwevAzcLRbSaKXc6GqnGMkw0yOQ5NabAF/7F08dKtMlSBodNzgtd1Y+7pMBXw==',
      };
    },
    methods: {
      changeInput(val) {
        this.$refs.treeSelect.filter(val);
      },
      loadNode(node, resolve) {
        console.log('node-------------node')
        console.log(node)
        console.log('node.level',node.level)
        let url = "";
        let param = "";
        let that = this;
        let parentDate;
        setTimeout(() => {
          if(node.level>1){
            parentDate=node.parent.data;
          }
          param={
            level:node.level,
            data:node.data,
            parent:{data:parentDate}
          };
          getTreeNode({params: JSON.stringify(param)}).then(result => {
            if(typeof(result.data.data.datas)!='undefined'){

              resolve(result.data.data.datas);

              // 默认展开x层节点
              if(node.level<3){
                this.$nextTick(() => {
                  node.childNodes[0].expanded = true;
                  node.childNodes[0].loadData();
                });
              }


            }else{
              resolve([]);
            }

          });
        }, 200)
      },
      filterNode(value, data) {
        console.log('------------------filterNode============')
        console.log('value',value)
        console.log('data',data)
        return !value || data.NAME.indexOf(value) > -1;
      },
      handleNodeClick(data, node) {

        let node_me = node;
        this.parentList = [];
        this.parentList.push(node.data);
        this.getTreeNode(node);

        this.$emit('handleTreeClick', this.parentList, data,node_me)
      },

      getTreeNode(node) {
        if (node&&node.parent!=null) {
          if(typeof(node.parent.data)=="object"&& node.parent.data.constructor == Object ){
            this.parentList.push(node.parent.data);
          }
          this.getTreeNode(node.parent);
        }
      },
    },


  }
</script>

<style scoped>
#commonTree {
  height: 100%;
  width: calc(100% - 0px);
}

.inputFilterClass{
  width: calc(100% - 20px);
  margin-top: 3px;
}
  .el-input--mini {
    padding: 6px 10px 0;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .el-form-item >>> .el-form-item__error {
    text-indent: 2em;
    z-index: 99;
  }

  .el-scrollbar {
    height: calc(100% - 40px);
    float: left;
    width: 100%;
  }

  .el-scrollbar >>> .el-scrollbar__wrap {
    overflow: auto;
    overflow-y: scroll;
  }

  .el-scrollbar >>> .el-scrollbar__bar.is-vertical {
    width: 6px !important;
  }



</style>