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} 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('hrmTrainRecord')
@inject('hrmCard')
@observer
class HrmTrainRecord extends React.Component {
  componentDidMount() {
    const { hrmTrainRecord, hrmCard } = this.props;
    const {changeId} = hrmTrainRecord;
    let hrmId = this.props.params.hrmId || '';
    hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
    changeId(hrmId)
    this.changeTab('1');
  }
  
  componentWillReceiveProps(nextProps) {
    if(this.props.location.key !== nextProps.location.key) {
      this.changeTab('1');
    }
  }

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

  onSearch = v => {
    this.props.hrmTrainRecord.form.updateFields({
      planname:{name:'planname',value:v},
    });
  }

  render(){
    const { hrmTrainRecord } = this.props;
    let {title,form,table,showSearchAd,searchParamsAd,tabkey,tabDatas} = hrmTrainRecord;
    tabDatas = toJS(tabDatas);

    const {query} = this.props.location;
    const formParams = form.getFormParams();
    return (
      <div className='wea-myhrm-Trainrecord'>
        <div style={query.fromcard? {display:'none'} :  {display:''}}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@5d0tlu`}
            title={title()}
            icon={<i className='icon-coms-hrm' />}
            iconBgcolor='#217346'
            buttons={this.getTopButtons()}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenu()}
          />
        </div>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@dwrdtj`}
          selectedKey={tabkey}
          datas={[{title: i18n.module.trainRecord(), key:"1"}, {title: i18n.label.trainingArrangements(), key:"2"}]}
          keyParam='key'
          selectedKey={tabkey}
          onChange={this.changeTab}
          buttonsAd={this.getTabButtonsAd()}
          searchType={['base','advanced']}
          searchsBaseValue={formParams.planname}
          setShowSearchAd={bool => {hrmTrainRecord.setShowSearchAd(bool)}}
          hideSearchAd={() => hrmTrainRecord.setShowSearchAd(false)}
          searchsAd={<div onKeyDown={this.onKeyDown}>{this.getSearchs()}</div>}
          showSearchAd={showSearchAd}
          onSearch={hrmTrainRecord.doSearch}
          onSearchChange={this.onSearch}
        />
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5ngm39`}
          comsWeaTableStore={table}
          hasOrder={true}
          needScroll={true}
          onOperatesClick={this.onOperatesClick}
          />
      </div>
    );
  }

  changeTab = (key) => {
    const {hrmTrainRecord} = this.props;
    hrmTrainRecord.changeTab(key);
  }

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

    const formParams = form.getFormParams();

    isFormInit && 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@we8019@${j}`} fieldConfig={fields} form={form} formParams={formParams}/>;
        items.push({
          com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ituyb0@${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@g9by7i@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
    });
    return group;
  }

  onOperatesClick = (record,index,operate,flag,argumentString) => {
    const { hrmTrainRecord } = this.props;
    const { condition } = hrmTrainRecord;
    const fn = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
    const id = record.id ? record.id : '';
    const applyworkflowid = !isEmpty(condition) && condition[0].applyworkflowid
    if(fn && fn=='jsHrmTrainApply'){
      PublicFunc[fn](id,applyworkflowid);
    }else{
      PublicFunc[fn](id);
    }
  }

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

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

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

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

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

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

export default HrmTrainRecord