import React from 'react'
import { Tree } from 'antd';

const TreeNode = Tree.TreeNode;


export default class PermTree extends React.Component {
    constructor(props){
        super(props)
        const value = props.value || {};
   this. state = {
        expandedKeys: [],
        autoExpandParent: true,
        ids: value.ids,
      }
    }
 
    
      onExpand = (expandedKeys) => {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
          expandedKeys,
          autoExpandParent: false,
        });
      }
    
      onCheck = (ids) => {
 
       
        if (!('value' in this.props)) {
            this.setState({ids });
        }
        this.triggerChange({ids});
      }
    
      triggerChange = (changedValue) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(Object.assign({}, this.state, changedValue));
        }
    }
    componentWillReceiveProps(nextProps) {
        // Should be a controlled component.
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState(value);
        }
    }
    
      renderTreeNodes = (data) => {
        return data.map((item) => {
          if (item.children) {
            return (
              <TreeNode title={item.title} key={item.key} dataRef={item}>
                {this.renderTreeNodes(item.children)}
              </TreeNode>
            );
          }
          return <TreeNode {...item} />;
        });
      }
    
   
     
    render() {
        return (
            <Tree
            checkable
            selectable={false}
            onExpand={this.onExpand}
            expandedKeys={this.state.expandedKeys}
            autoExpandParent={this.state.autoExpandParent}
            onCheck={this.onCheck}
            checkedKeys={this.state.ids}
          
          >
            {this.renderTreeNodes(this.props.all)}
          </Tree>
        
          );
        
    }
}