import React, { Component } from 'react'
import './staffTree.less'
import { Tree } from 'antd'
const { TreeNode } = Tree
/**
 * 树形选择器
 */
class staffTree extends Component {
    state = {
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
    }
    componentDidMount(){
        
    }
    componentWillReceiveProps(nextProps) {
        let checkedKeys = this.getKeys(nextProps.treeData, 'Checked', [])
        this.setState({checkedKeys})
        let expandedKeys = this.getKeys(nextProps.treeData, 'Expanded', [])
        this.setState({expandedKeys})
    }
    renderTreeNodes = (treeData) => {
        return treeData.map(item => {
            if (item.ChildNodes && item.ChildNodes.length) {
                return (
                    <TreeNode title={item.Text || '人员机构列表'} key={item.Value || 'root'} checkable={item.ShowCheckBox}>
                        {this.renderTreeNodes(item.ChildNodes)}
                    </TreeNode>
                )
            }
            return <TreeNode key={item.Value} {...item} title={item.Text || '人员机构列表'} Value={item.Value || 'root'}/>
        })
    }
    getKeys(data, key, arr) {
        data && data.length && data.forEach(item => {
            if (item[key]) {
                arr.push(item.Value || 'root')
            }
            this.getKeys(item.ChildNodes, key, arr)
        })
        return arr
    }
    onExpand = expandedKeys => {
        // console.log('onExpand', expandedKeys)
        this.setState({
          expandedKeys,
          autoExpandParent: false,
        })
    }
    onCheck = checkedKeys => {
        // console.log('onCheck', checkedKeys)
        this.setState({checkedKeys})
    }
    // 获取勾选keys
    getCheckedKeys() {
        const { checkedKeys } = this.state
        let res = []
        checkedKeys.forEach(item => {
            if (item.includes('/')) {
                res.push(item)
            }
        })
        return res
    }
    
    render(){
        const { treeData } = this.props
        return (
            <div className="flowCenter_staffTree_warp">
                <Tree
                    checkable
                    selectable={false}
                    onExpand={this.onExpand}
                    expandedKeys={this.state.expandedKeys}
                    autoExpandParent={this.state.autoExpandParent}
                    onCheck={this.onCheck}
                    checkedKeys={this.state.checkedKeys}
                >
                    {this.renderTreeNodes(treeData)}
                </Tree>
            </div>
        )
    }
}
export default staffTree