import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaTop, WeaTab,WeaRightMenu,WeaErrorPage,WeaSearchGroup,WeaFormItem,WeaSelect,WeaAlertPage,} from 'ecCom';
import {Row,Col,Button,Form} from 'antd';
import * as mobx from 'mobx';
import isEmpty from 'lodash/isEmpty';
const toJS = mobx.toJS;
import * as PublicFunc from '../util/pulic-func';
window.openFullWindowForXtable = PublicFunc.openFullWindowForXtable;
import moment from 'moment';
import {WeaTableNew,WeaSwitch} from 'comsMobx';
import {i18n} from '../public/i18n';
const WeaTable = WeaTableNew.WeaTable;

@inject('hrmOnline')

@observer
class HrmOnline extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { hrmOnline } = this.props;
    hrmOnline.getData();
  }

  onKeyDown = (e) =>{
    if ( e.keyCode == 13 && e.target.tagName === "INPUT") {
      this.props.hrmOnline.doSearch();
      this.props.hrmOnline.setShowSearchAd(false)
    }
  }  

  onSearchChange = v => {
    this.props.hrmOnline.form.updateFields({
        lastname:{name:'lastname',value:v},
      });
    }

  render(){
    const { hrmOnline } = this.props;
    const {title,form,table,showSearchAd,searchParamsAd} = hrmOnline;

    const formParams = form.getFormParams();
    return (
      <div className='wea-myhrm-Online'>
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@t5f494`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@0p12bf`}
          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@92htyf`}
          buttonsAd={this.getTabButtonsAd()}
          searchType={['base','advanced']}
          searchsBaseValue={formParams.lastname}
          setShowSearchAd={hrmOnline.setShowSearchAd}
          hideSearchAd={() => hrmOnline.setShowSearchAd(false)}
          searchsAd={<div onKeyDown={this.onKeyDown}>
            <Form ecId={`${this && this.props && this.props.ecId || ''}_Form@miak7g`} horizontal>{this.getSearchs()}</Form>
          </div>}
          showSearchAd={showSearchAd}
          onSearch={hrmOnline.doSearch}
          onSearchChange={this.onSearchChange}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@aypgw2`}
          comsWeaTableStore={table}
          //hasOrder={true}
          needScroll={true}
          getColumns={this.reRenderColumns}
          onOperatesClick={this.onOperatesClick}
          />
        </WeaTop>
        </WeaRightMenu>
      </div>
    );
  }

  getSearchs = () => {
    const { hrmOnline } = this.props;
    const { form,condition } = hrmOnline;
    const {isFormInit} = form;
    let group = [];

    const formParams = form.getFormParams();
    isFormInit && !isEmpty(condition) && condition.map((c, i) =>{
      let items = [];
      c.items.map((fields, j) => {
        let hide = false;
        let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@77uv0j@${j}`} fieldConfig={fields} form={form} formParams={formParams}/>;
        items.push({
          com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4e0v9i@${j}`}
              label={`${fields.label}`}
              labelCol={{span: `${fields.labelcol}`}}
              wrapperCol={{span: `${fields.fieldcol}`}}>
                {dom}
              </WeaFormItem>),
          colSpan:1,
          hide: hide
        })
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@wiv4g0@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
    });
    return group;
  }

  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 { hrmOnline } = this.props;
    const fn = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
    const id = record.id ? record.id : '';
    if(fn == 'forcedOffline'){
      hrmOnline.forcedOffline(id);
    }else{
      PublicFunc[fn](id);
    }
  }

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

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

  onRightMenuClick = (key) => {
    const { hrmOnline } = this.props;
    switch(key){
        case '0':
            hrmOnline.doSearch();
            break;
        case '1':
            this.definedColumn();
            break;
    }
  }

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

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

  getTabButtonsAd = () => {
    const { hrmOnline } = this.props;
    const { form,searchParamsAd } = hrmOnline;
    return [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@e3o7su@1`} type="primary" onClick={()=>{hrmOnline.doSearch();hrmOnline.setShowSearchAd(false)}}>{i18n.button.search()}</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@auupok@2`} type="ghost" onClick={()=>{form.reset();}}>{i18n.button.reset()}</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@f10ph5@3`} type="ghost" onClick={()=>{hrmOnline.setShowSearchAd(false)}}>{i18n.button.cancel()}</Button>)
    ]
  }

  getTopButtons = () => {
    const { hrmOnline } = this.props;
    return [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hwv0hc@1`} type="primary" onClick={hrmOnline.doSearch}>{i18n.button.search()}</Button>)
    ]
  }
}

export default HrmOnline