import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaTop, WeaTab,WeaRightMenu,WeaErrorPage,WeaSearchGroup,WeaFormItem,WeaSelect,WeaAlertPage,} from 'ecCom';
import {Row,Form,Col,Button} from 'antd';
import * as mobx from 'mobx';
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('hrmBirthdayInfo')

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

  componentDidMount() {
    const { hrmBirthdayInfo } = this.props;
    hrmBirthdayInfo.getHasRight();
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.location.key !== nextProps.location.key) {
      const { hrmBirthdayInfo } = this.props;
      hrmBirthdayInfo.getHasRight();
    }
  }

  hideSearchAd = () => this.props.hrmBirthdayInfo.setShowSearchAd(false)

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

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

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

    if (verified && hasRight) {
      const formParams = form.getFormParams();
      return (
        <div className='wea-myhrm-Online'>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@lns8os`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@vwdkbc`}
            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@97mtsx`}
            buttonsAd={this.getTabButtonsAd()}
            searchType={['base','advanced']}
            searchsBaseValue={formParams.lastname}
            setShowSearchAd={hrmBirthdayInfo.setShowSearchAd}
            hideSearchAd={this.hideSearchAd}
            searchsAd={<div onKeyDown={this.onKeyDown}><Form ecId={`${this && this.props && this.props.ecId || ''}_Form@0nehxt`} horizontal>{this.getSearchs()}</Form></div>}
            showSearchAd={showSearchAd}
            onSearch={hrmBirthdayInfo.doSearch}
            onSearchChange={this.onSearchChange}
          />
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@1g75k8`}
            comsWeaTableStore={table}
            hasOrder={true}
            needScroll={true}
            getColumns={this.reRenderColumns}
            />
          </WeaTop>
          </WeaRightMenu>
        </div>
      );
    }
    if (verified && !hasRight) {
        return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@7fttjc`} >
                <div style={{color : '#000'}}>
                    {i18n.message.authFailed()}
                </div>
            </WeaAlertPage>
        )
    }
    return (
        <div></div>
    )
  }

  updateMonth = v => {
    this.props.hrmBirthdayInfo.form.updateFields({
      bMonth:{name:'bMonth',value:v},
    });
  }

  updateBDate = v => {
    this.props.hrmBirthdayInfo.form.updateFields({
      bDate:{name:'bDate',value:v},
    });
  }

  getSearchs = () => {
    const { hrmBirthdayInfo } = this.props;
    const { form,condition } = hrmBirthdayInfo;
    const {isFormInit} = form;
    let group = [];
    let  monthOptions= hrmBirthdayInfo.getMonth();
    let  dayOptions= hrmBirthdayInfo.getDay();

    const formParams = form.getFormParams();
    const month = new moment().format('MM');
    isFormInit && condition.map((c, i) =>{
      let items = [];
      c.items.map((fields, j) => {
        let hide = false;
        let dom;
        if (fields.domkey[0] == 'bDate') {
          hide = true;
        }if (fields.domkey[0] == 'bMonth') {
          dom = <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6nz8eb@${j}`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gn8y0v@${j}`} span={10} style={{'margin-right':'5px'}}>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ivfv7i@${j}`} options={monthOptions} value={formParams.bMonth||month} onChange={this.updateMonth}/>
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6bjekt@${j}`} span={10}>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@uusek6@${j}`} options={dayOptions} value={formParams.bDate||''} onChange={this.updateBDate}/>
          </Col>
        </Row>
        }else {
          dom =  <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@pivczp@${j}`} fieldConfig={fields} form={form} formParams={formParams}/>;
        }
        items.push({
          com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@e1ea5v@${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@kwy195@${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.randomFieldId)}>{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;
  }

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

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

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

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

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

  onClickHandle1 = () => {
    this.props.hrmBirthdayInfo.doSearch();
    this.props.hrmBirthdayInfo.setShowSearchAd(false);
  }

  onClickHandle2 = () => {
    this.props.hrmBirthdayInfo.form.reset();
    this.props.hrmBirthdayInfo.form.updateFields({
      bMonth:{value: new moment().format('MM')},
    })
  }

  onClickHandle3 = () => {
    this.props.hrmBirthdayInfo.setShowSearchAd(false)
  }

  getTabButtonsAd = () => {
    const { hrmBirthdayInfo } = this.props;
    const { form,searchParamsAd } = hrmBirthdayInfo;
    return [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5vg8gh@1`} type="primary" onClick={this.onClickHandle1}>{i18n.button.search()}</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2h9lf2@2`} type="ghost" onClick={this.onClickHandle2}>{i18n.button.reset()}</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@avwici@3`} type="ghost" onClick={this.onClickHandle3}>{i18n.button.cancel()}</Button>)
    ]
  }

  getTopButtons = () => {
    const { hrmBirthdayInfo } = this.props;
    return [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@01yfqd@1`} type="primary" onClick={hrmBirthdayInfo.doSearch}>{i18n.button.search()}</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@brxy43@2`} type="primary" onClick = {hrmBirthdayInfo.doExport}>{i18n.button.export()}</Button>)
    ]
  }
}

export default BirthdayInfo