import React, {Component} from 'react';
import {observer} from 'mobx-react';
import * as mobx from 'mobx';
import {WeaLocaleProvider, WeaBrowser, WeaOrgTree} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;

@observer
export default class Left extends Component{
    chooseUser = e => {
        const {store} = this.props;
        let hrmId = '', hrmName = undefined;
        if (e.selected) {
            hrmId = e.node.props.id;
            hrmName = e.node.props.name;
        }
        if (hrmId) {
            store.updateHrm(hrmId, hrmName);
        }
    }

    render(){
        const {store} = this.props;
        const {canSearch, resetUserRoot, updateUserRoot} = store;
        const userRoot = toJS(store.userRoot);
        return (
            <div className={`left ${canSearch ? '' : 'left-hide'}`}>
                <div className="header">
                    {getLabel('32997',"人员组织")}
                </div>
                <div className='hrmBrowser'>
                    <div>
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@uzr2zb`}
                            type="1" viewAttr="2"
                            replaceDatas={userRoot}
                            customIcon="icon-coms-Reset"
                            addOnClick={() => resetUserRoot()}
                            onChange={updateUserRoot}
                        />
                    </div>
                </div>
                <div className='treeList'>
                    <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@jj22tw`} dataUrl="/api/hrm/base/getHrmResourceTree" rootKey="rootManager"
                        treeNodeClick={this.chooseUser}
                        params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {}}
                    />
                </div>
            </div>
        )
    }
}