import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';  
import cx from 'classnames';
import s from './form.scss'; 
import { Tree,TreeSelect} from 'antd';
const TreeNode = TreeSelect.TreeNode;
import {getOrganizations,getCompany}  from '../../../utils/orgUtil';
import {noop, setLeaf, getNewTreeData}  from '../../../utils/commonUtils'; 
import {connect} from 'react-redux';
import {notification} from 'antd';


const openNotificationWithIcon = function (type) { 
    notification[type]({
      message: '提示',
      description: '上级部门不能选自己',
    }); 
};

class OrgTree extends React.Component {
	constructor(props) {
        super(props); 
        this.onLoadData=this.onLoadData.bind(this);
        this.onSelect=this.onSelect.bind(this);
        this.state={ 
            treeData: [],
            value:''
        };  
    }
    static propTypes = {   
        onSelect:PropTypes.func,
        defaultValue:PropTypes.string
    } 
    static defaultProps={ 
        defaultValue:''
    } 
    componentDidMount(){ 
        const {defaultValue}=this.props;
        this.setState({
            value:defaultValue
        });
        getCompany({}).then((data)=>{
            console.log('my antform company isssss:', data);
            data.items[0]['key'] = data.items[0].uuid; 
            this.setState({
                treeData : data.items
            });
        }); 
    }  
    componentWillReceiveProps (nextProps) {
        const {defaultValue}=nextProps;
        if(defaultValue&&this.props.defaultValue!=defaultValue){
            this.setState({ 
                value:defaultValue
            });
        }
    }
    onLoadData(treeNode) {
        return new Promise((resolve) => {
            const { treeData } = this.state;
            let _treeData = treeData; 
             getOrganizations({pId:treeNode.props.eventKey}).then((data)=>{  
                if (data.items&&data.items.length>0) {
                    for (let item of data.items) { 
                        item['key']=item.uuid;
                    }
                }
                getNewTreeData(_treeData, treeNode.props.eventKey, data.items); 
                this.setState({
                    treeData : _treeData
                });
            }); 
            resolve(); 
        });
    }
    onSelect(value, node, extra){
        const {currentOrganization}=this.props;
        if(value==currentOrganization.uuid){
            openNotificationWithIcon('warning');
            return false;
        }
        this.setState({ value });
        this.props.onSelect(value, node);
    }
    render(){  
    	const self=this;  
        const loop = (data) => data.map((item) => {   
            if (item.children) {
                return <TreeNode title={item.name} key={item.key} value={item.key}>{loop(item.children)}</TreeNode>;
            }
            let isLeaf = false;
            if (item.is_leaf=='y') { 
                isLeaf = true;
            }
            return <TreeNode title={item.name} key={item.key} value={item.key} isLeaf={isLeaf}></TreeNode>; 
        });
        const treeNodes = loop(this.state.treeData);

        return(
            <TreeSelect
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder="请选择"
            allowClear 
            onSelect={this.onSelect}
            loadData={this.onLoadData}  >  
                {treeNodes} 
            </TreeSelect>
        )
    }
}

// const mapStateToProps = (state) => {
//     const { organization:{ currentOrganization } } = state;
//     return {
//         currentOrganization
//     };
// }
 
// export default connect(mapStateToProps)(OrgTree);
export default OrgTree;