import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaTop, WeaTab,WeaRightMenu,WeaTools} from 'ecCom';
import {Spin,Button} from 'antd';
import * as mobx from 'mobx';
import isEmpty from 'lodash/isEmpty';
const toJS = mobx.toJS;
import * as PublicFunc from '../util/pulic-func';
import moment from 'moment';
import {WeaTableNew} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import {i18n} from '../public/i18n';

@inject('hrmUnderling')

@observer
class HrmUnderling extends React.Component {
  componentDidMount() {
   this.init();
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.location.key !== nextProps.location.key) {
     this.init();
    }
  }

  init = () => {
    const { hrmUnderling } = this.props;
    let hrmId = this.props.params.hrmId || '';
    hrmUnderling.id = hrmId;
    hrmUnderling.lastname = '';
    hrmUnderling.showAllLevel = false;
    hrmUnderling.getSearchList();
  }

  getTopButtons = () => {
    const { hrmUnderling } = this.props;
    const { showAllLevel } = hrmUnderling;
    let btns =[];
  
    const btnShowAllLevel = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gs8mcv`} size="small" style={{height: '28px'}} onClick={()=>this.changeShowAllLevel()} title={showAllLevel?i18n.button.directSubordinates():i18n.button.DisplaySubordinateSubordinates()}>
                            <span>{showAllLevel?
                                  <i className='icon-coms-DisplaySubordinates' style={{color: '#2db7f5'}}/>
                                  :<i className='icon-coms-NoDisplayOfSubordinates'/>}</span>
                          </Button>;
    btns.push(btnShowAllLevel);
    btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wf33xm@1`} type="primary" onClick={() => hrmUnderling.getSearchList()} >{i18n.button.search()}</Button>);
    return btns;
  }

  changeShowAllLevel = () => {
    const { hrmUnderling } = this.props;
    hrmUnderling.changeShowAllLevel();
  }

  onSearchChange = v => {
    this.props.hrmUnderling.lastname = v;
  }

  render(){
    const { hrmUnderling } = this.props;
    let {title,lastname,table} = hrmUnderling;

    if(window.location.href.indexOf("/spa/hrm/index_mobx.html")>-1){
      if(title){
          document.title=title;
      }
    }

    return (
      <div className='wea-myhrm-Underling'>
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@a48dz6`} datas={this.getRightMenu()}>
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@z9d0bz`}
          title={title}
          icon={<i className='icon-coms-hrm' />}
          iconBgcolor='#217346'
          buttons={this.getTopButtons()}
          buttonSpace={10}
          showDropIcon={true}
          dropMenuDatas={this.getRightMenu()}
        >
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@sxlnfc`}
          searchType={['base']}
          searchsBaseValue={lastname}
          onSearch={hrmUnderling.getSearchList}
          onSearchChange={this.onSearchChange}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@f8zrr1`}
          comsWeaTableStore={table}
          hasOrder={true}
          needScroll={true}
          getColumns={this.reRenderColumns}
          onOperatesClick={this.onOperatesClick}
          />
        </WeaTop>
        </WeaRightMenu>
      </div>
    );
  }

  reRenderColumns = (columns) => {
    columns.forEach(c=>{
        if(c.dataIndex=='lastname'){
            c.render = (text, record) => {
                return  <span style={{cursor:'pointer'}} className='wea-hrm-linkstyle' onClick={() => this.jumpToHrmCard(record.id)}>{record.lastname}</span>
            }
        } else {
          // c.render = function(text, record){
          //     let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
          //     return <span dangerouslySetInnerHTML={{__html: valueSpan}}></span>
          //   }
        }
    })
    return columns;
  }

  onOperatesClick = (record,index,operate,flag,argumentString) => {
    const fn = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
    const id = record.id ? record.id : '';
    PublicFunc[fn](id);
  }

  jumpToHrmCard = (hrmId) => {
    PublicFunc.jumpToHrmCard(hrmId);
  }

  getRightMenu = () => {
    const keys = this.getSelectedRowKeys();
    const { hrmUnderling } = this.props;
    const arr = [{
        icon: <i className='icon-coms-ws'/>,
        content:i18n.button.search(),
        key: 'getSearchList',
        onClick: hrmUnderling.getSearchList
      }, {
        icon: <i className='icon-coms-task-list'/>,
        content:i18n.button.columnVisibleSetting(),
        key: 'definedColumn',
        onClick: this.definedColumn
      }
    ];
    return arr;
  }

  getSelectedRowKeys = () => {
    const { hrmUnderling } = this.props;
    const { table } = hrmUnderling;
    const selectedRowKeys = table.selectedRowKeys;
    return selectedRowKeys;
  }

  definedColumn = () => {
    const { hrmUnderling } = this.props;
    const { table} = hrmUnderling;
    table.setColSetVisible(true);
    table.tableColSet(true);
  }
}

export default HrmUnderling