<template>
  <el-tree
    class="multiselectTree"
    ref="treeNode"
    :data="treeData"
    show-checkbox
    :props="defaultProps"
    :node-key="nodeKey"
    :default-expanded-keys="defaultExpandedKeys"
    :current-node-key="currentNodeKey"
    :default-expand-all='defaultExpandAll'
    @check-change="handleCheckChange"
    @node-click="handleNodeClick"
    >
  </el-tree>
</template>

<script>
  import Api from '../api/index.js'

  export default { 
    props: {
      treeData: { 
        type: Array,
        default: () => []
      },
      nodeKey: {
        type: String,
        default: 'id'
      },
      tab2Onoff: { 
        type: Boolean,
        default: false 
      },
      defaultProps: {
        type: Object,
        default: () => ({
          children: 'childrens',
          label: 'text',
          isLeaf: 'leaf'
        })
        /* function () {
          return {
            children: 'childrens',
            label: 'text',
            isLeaf: 'leaf'
          }
        } */
      },
      editOnoff: { 
        type: Boolean,
        default: false  
      },
      defaultExpandedKeys: { 
        type: Array,
        default: () => []
      },
      defaultCheckedKeys: { 
        type: Array,
        default: () => []
      },
      defaultExpandAll: { 
        type: Boolean,
        default: false 
      }
    },
    data () { 
      return { 
        currentNodeKey: '', // 当前选中节点的 key -> string, number
        getCheckedKeys: []
      }
    },
    watch: { 
      tab2Onoff (val) { 
        if (val) { 
          this.$refs['treeNode'].setCheckedKeys(this.getCheckedKeys)
        }
      },
      editOnoff (val) { 
        this.$refs['treeNode'].setCheckedKeys(this.defaultCheckedKeys)
      }
    },
    methods: { 
      // 异步加载树
      /* loadNode(node, resolve) {           // 加载节点
        let vm = this

        if (node.level === 0) {  //直接显示第一级菜单
          return resolve(this.treeData); 
        }
        let arr = []

        console.log(node)
        
        this.$http.get(Api.monitorServiceApi+'/getCatalogServiceTree')
          .then(function(response) {
            // success callback

            console.log(response.body.results)

            let body = response.body.results

            if (body instanceof Array) {
              body.forEach(function(item) {
                if(node.data.text === item.text){ 
                  body = item.childrens

                  body.forEach(function(item) { //将所点击的子级传给arr
                    arr.push({
                      id: item.id,
                      text: item.text,
                      parentId: item.parentId,
                      sort: item.sort,
                      leaf: item.leaf
                    })
                  })
                  return
                }
              })
            }else {
              arr = []
            }

            // 加载下级
            let data = (node.data.leaf === false) ? data = arr : []

            setTimeout(() => {
              resolve(data);
            }, 300);
            
          }, function(response) {
            // error callback
            console.log('error:',response)
          })
      }, */
      // 选择树节点
      handleCheckChange () {
        this.getCheckedKeys = this.$refs['treeNode'].getCheckedKeys()
        this.$emit('select-node', this.$refs['treeNode'].getCheckedKeys())
      },
      handleNodeClick () { 
        // console.log(this.$refs['treeNode'].getCheckedKeys())
      }
    }
  }
</script>

<style lang="scss">
  .multiselectTree { 
    width: 360px;
    max-height: 360px;
    overflow-y: auto;
    float: left;
    margin-top: 10px;
/* 
    .el-tree-node__content {
      overflow: hidden;
    }
    .el-tree-node__expand-icon { 
      float: right;
      background: url('../../static/images/right.png') no-repeat center center;
      background-size: 70% auto;
      width: 36px;
      height: 36px;
      padding: 0;
      margin: 0;
      border: none;
    }
    .el-tree-node__expand-icon.is-leaf {
      border: none;background: none;
    }
    .el-checkbox {
      margin-left: 10px;
    }
    .el-checkbox,.el-tree-node__label {
      float: left;
    } */
  }
</style>
