import React, { Component } from 'react'
import {
    WeaLocaleProvider,
    WeaOrgTree,
    WeaCheckbox,
    WeaBrowser,
    WeaTools,
  } from 'ecCom';

import {observer} from 'mobx-react'
import {toJS} from 'mobx'



const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class LeftTree extends Component {


    resetUserRoot() {
        const {
          newOutSide
        } = this.props;
        newOutSide.updateUserRoot();
        newOutSide.updateHrmId();
        newOutSide.updateHrmName();
        this.getData();
      }
      getData() {
        const {
            newOutSide
        } = this.props;
        newOutSide.getData();
      }

      changeUserRoot(ids, names, datas) {
        const {
          newOutSide
        } = this.props;
        newOutSide.updateUserRoot(datas);
      }

      chooseUser(e) {
        const {
          newOutSide
        } = this.props;
        const {updateHrmId,updateHrmName,getRadioGroupConfig} = newOutSide;
        let hrmId = '',
          hrmName = undefined;
        if (e.selected) {
          hrmId = e.node.props.id;
          hrmName = e.node.props.name;
        }
        if (hrmId) {
          updateHrmId(hrmId);
          if (hrmName) updateHrmName(hrmName);
          this.getData();
        }
      }

      onTreeCheck(ids, datas) {
        const {
          newOutSide
        } = this.props;
        let idds = [];
        datas.forEach((d) => {
          idds.push(d.id);
        })
        newOutSide.updateHrmId(idds.join(','));
        newOutSide.updateOrgTreeCheckedDatas(datas);
        this.getData();
      }

    render() {
        const {
            newOutSide
          } = this.props;
          let {
            userRoot,
            orgTreeIsMult,
            orgTreeCheckedDatas
          } = newOutSide;
          userRoot = toJS(userRoot);

          return (
          <div className="wea-hrm-checking-left" style={{height: window.innerHeight - 125}}>
            <div className="left-header">
              <div className="header-title bb">
                <div style={{padding: '0 15px'}}>
                  <span style={{float: 'left',width: 120}} className='text-elli'>{getLabel('32997', "人员组织")}</span>
                  <span style={{float: 'right', fontSize: '12px'}}>
                      <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@k55dn7`} onChange={(v)=> {
                          newOutSide.updateOrgTreeIsMult(v);
                          newOutSide.updateOrgTreeCheckedDatas();
                          this.refs.orgTree && this.refs.orgTree.resetCheck()
                      }}
                    value={orgTreeIsMult}/>&nbsp;&nbsp;{getLabel('386504',"开启选择")}
                  </span>
                </div>
              </div>
            </div>
            <div className="left-body">
              <div>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@9puzxv`} isSingle={true}
                    linkUrl="/hrm/resource/HrmResource.jsp?id=" title={getLabel('179',"人力资源")} type="1" viewAttr="2"
                    replaceDatas={userRoot}
                    customIcon="icon-coms-Reset"
                    addOnClick={this.resetUserRoot.bind(this)}
                    onChange={this.changeUserRoot.bind(this)}
                  />
                  <div style={{display: orgTreeIsMult == '0'?'block':'none',height: window.innerHeight - 225}}>
                    <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@96glr4`}
                      renderNodeId = {(item)=> item.id}
                      dataUrl="/api/hrm/base/getHrmResourceTree"
                      rootKey="rootManager"
                      treeNodeClick={this.chooseUser.bind(this)}
                      params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {}}
                    />
                  </div>
                  <div style={{display: orgTreeIsMult == '1'?'block':'none',height: window.innerHeight - 225}}>
                    <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@jscgrh`}
                      ref="orgTree"
                      dataUrl="/api/hrm/base/getHrmResourceTree"
                      rootKey="rootManager"
                      onCheck={this.onTreeCheck.bind(this)}
                      isMult={true}
                      checkStrictly={false}
                      checkedDatas={orgTreeCheckedDatas}
                      params={Array.isArray(userRoot) && userRoot[0] ? {rootid: userRoot[0].id} : {}}
                    />
                  </div>
              </div>
            </div>
        </div>
          )
    }
}