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

const {TreeNode} = TreeSelect

@connect(({globaldata, loading}) => ({
    globaldata,
    loading: loading.models.globaldata,
}))
class SelectOrganTree extends PureComponent {
    state = {
        value: undefined,
        treeData: [
            { title: '机构', key: '000000000000', value: '000000000000', org_id: '000000000000', org_code: '0000', id: '000000000000' }
        ],
    }

    constructor(props) {
        super(props)
    }

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

    onChange = (value, label, extra) => {
        if (value !== '000000000000') {
            const {selectedOrganTreeValue} = this.props
            if(selectedOrganTreeValue){
                const selectDept = {
                    org_code: value,
                    title: label[0]
                }
                selectedOrganTreeValue(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.value === key) {
                return {
                    ...node,
                    children
                }
            } else if (node.children) {
                return {
                    ...node,
                    children: this.updateTreeData(node.children, key, children)
                }
            }

            return node
        })
    }

    onLoadData = ({ key, children, id }) => {
        const { dispatch } = this.props
        const params = { parentid: id }

        return new Promise((resolve) => {
            if (children) {
                resolve()
                return
            }

            dispatch({
                type: 'globaldata/get_proorgtree_by_parentid_for_proorg',
                payload: params,
                callback: (res) => {
                    if(res.success === true) {
                        this.setState({
                            treeData: this.updateTreeData(this.state.treeData, key, res.list)
                        })

                        resolve()
                    }
                }
            })
        })
    }

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.title} dataRef={item} value={item.title}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                )
            }
            return <TreeNode {...item} value={item.title} dataRef={item} title={item.title} key={item.title}/>
        })

    render() {
        const { treeData, value } = this.state

        return (
            <TreeSelect
                showSearch
                value={value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder='请选择机构'
                treeDefaultExpandAll
                onSelect={this.onSelect}
                onChange={this.onChange}
                onTreeExpand={this.onTreeExpand}
                loadData={this.onLoadData}
                treeData={treeData}
            />
        )
    }
}

export default SelectOrganTree
