import {PureComponent} from 'react';
import {TreeSelect} from 'antd';
import { connect, history } from '@umijs/max';

const {TreeNode} = TreeSelect;

@connect(({globaldata, loading}) => ({
    globaldata,
    loading: loading.models.globaldata
}))

class SelectDeptTree extends PureComponent {
    state = {
        value: this.props.value,
        treeData: [
            {title: '部门', id: '000000000000', key: '000000000000', value: '000000000000', dept_id: '000000000000', dept_code: "000"},
        ],
    };

    UNSAFE_componentWillReceiveProps(nextProps) {
        if(undefined != nextProps.value && nextProps.value !== this.props.value) {
            this.setState({value: nextProps.value});
        }
    }

    constructor(props) {
        super(props);
    }

    onChange = (value, label, extra) => {

        if (value != '000000000000') {

            const {selectedDeptTreeValue} = this.props;
            if(selectedDeptTreeValue){
                const selectDept = {
                    dept_code: value,
                    title: label[0],
                }
                selectedDeptTreeValue(selectDept, label, extra);
            }
            this.setState({value});
        }

    };

    onSelect = value => {
        const {onSelect} = this.props;
        if(onSelect){
            onSelect(value)
        }
    }

    onTreeExpand = expandedKeys => {
        const {onTreeExpand} = this.props;
        if(onTreeExpand){
            onTreeExpand(expandedKeys)
        }
    }

    updateTreeData(list, key, children) {
        return list.map(node => {
            if (node.key === key) {
                return {
                    ...node,
                    children,
                };
            } else if (node.children) {
                return {
                    ...node,
                    children: this.updateTreeData(node.children, key, children),
                };
            }
            return node;
        });
    }

    onLoadData = ({id, key, children}) => {
        const {dispatch} = this.props;
        const params = {
            parentid: id,
        };
        return new Promise((resolve) => {
            if (children) {
                resolve();
                return;
            }
            dispatch({
                type:  'globaldata/get_prodepttree_by_parentid_for_prodept',
                payload: params,
                callback: (res) => {
                    if(res.success == true) {
                        // treeNode.props.dataRef.children = res.data;
                        this.setState({
                            treeData: this.updateTreeData(this.state.treeData, key, res.data)
                        });
                        resolve();
                    }

                }
            });
        });
    };

    render() {
        const { treeData, value } = this.state;
        const { placeholder } = this.props;
        return (
            <TreeSelect
                showSearch
                value={value}
                dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
                placeholder={placeholder == null ? null : "请选择部门"}
                treeDefaultExpandAll
                onSelect={this.onSelect}
                onChange={this.onChange}
                onTreeExpand={this.onTreeExpand}
                loadData={this.onLoadData}
                treeData={treeData}
            />
        );
    }
}

export default SelectDeptTree;
