import React from 'react';
import {
  inject,
  observer
} from 'mobx-react';
import {
  WeaOrgTree
} from 'ecCom';
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import {
  i18n
} from '../../public/i18n';

@inject('hrmOrganization')
@observer
class OrganizationTree extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const {
      hrmOrganization
    } = this.props;
    // hrmOrganization.orgTree = this.refs.WeaOrgTree;
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.location.key !== nextProps.location.key) {
      const {
        hrmOrganization
      } = this.props;
      hrmOrganization.selectVirtual(1);
      // this.refs.WeaOrgTree.resetDropMenu();
      if(hrmOrganization.orgTree){
        hrmOrganization.orgTree.resetDropMenu && hrmOrganization.orgTree.resetDropMenu();
        hrmOrganization.orgTree.fetchData && hrmOrganization.orgTree.fetchData();
      }
    }
  }

  treeNodeClick(nodeObj) {
    const {
      hrmOrganization
    } = this.props;
    const {
      isVirtual,
      companysId
    } = hrmOrganization;
    hrmOrganization.tabKey = '1';
    hrmOrganization.typeValue = nodeObj.node.props.id || '';

    let nodeType = nodeObj.node.props.type || '0';
    if (nodeType == '0') {
      hrmOrganization.type = "company";
      hrmOrganization.typeValue = companysId;
    } else if (nodeType == '1') {
      hrmOrganization.type = "subcompany";
    } else if (nodeType == '2') {
      hrmOrganization.type = "department";
    }
    hrmOrganization.initData();
  }

  renderNode(item) {
    return <div className='text-elli' title={item.name}>
              <i className={item.icon} style={{marginRight: '5px'}}></i>
              {item.name}
              {item.canceled && <span style={{color: 'red'}}>({i18n.label.canceled()})</span>}
            </div>
  }

  selectVirtual(v) {
    const {
      hrmOrganization
    } = this.props;
    //#1090939 概述：解决虚拟维度点封存图标跳回行政维度的问题
    if (v.domEvent) {
      hrmOrganization.selectVirtual(v.key);
      hrmOrganization.initData();
    }
  }

  setTreeRef = dom => {
    const {
      hrmOrganization
    } = this.props;
    hrmOrganization.orgTree = dom;
  }

  render() {
   const {
       hrmOrganization
     } = this.props;
    const {
       showCanceled,
       companysId
    } = hrmOrganization;
    return (
      <div className='wea-hrm-organization-tree' style={{height:'100%'}}>
         <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@49km86`}
          ref={dom => this.setTreeRef(dom)}
          needSearch
          noCache={true}
          needDropMenu={true}
          companysId={companysId}
          onSelect={(v)=>this.selectVirtual(v)}
          isLoadSubDepartment={true}
          topPrefix={'hrmSearch'}
          params={{showCanceled: showCanceled?"1":"",rightStr:'HrmResourceAdd:Add'}}
          inputLeftDom = {`<b>${i18n.label.companyInfo()}</b>`}
          treeNodeClick={(ids,nodes)=>this.treeNodeClick(ids,nodes)}
          renderNode={ item => this.renderNode(item)}
          expandAllChildrenOnSearch={true}
          />
      </div>
    );
  }
}

export default OrganizationTree