import React from 'react';
import {
  inject,
  observer
} from 'mobx-react';
import {
  WeaTab,
  WeaSearchGroup,
  WeaFormItem,
} from 'ecCom';
import {
  Form,
  Button
} from 'antd';
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import {
  WeaSwitch
} from 'comsMobx';
import {
  i18n
} from '../../public/i18n';

@inject('hrmOrganization')

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

  getTabButtonsAd() {
    const {
      hrmOrganization
    } = this.props;
    const {
      formCondition,
      searchParamsAd
    } = hrmOrganization;
    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xxyiby`} type="primary" onClick={()=>{hrmOrganization.doSearch();hrmOrganization.setShowSearchAd(false)}}>{i18n.button.search()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2h4jn1`} type="ghost" onClick={()=>{formCondition.resetConditionValue();}}>{i18n.button.reset()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dqtke8`} type="ghost" onClick={()=>{hrmOrganization.setShowSearchAd(false)}}>{i18n.button.cancel()}</Button>)
    ]
  }

  getSearchs() {
    const {
      hrmOrganization
    } = this.props;
    const {
      formCondition,
      condition
    } = hrmOrganization;

    const {
      isFormInit
    } = formCondition;
    let group = [];

    const formParams = formCondition.getFormParams();
    isFormInit && toJS(condition).map((c, i) => {
      let items = [];
      c.items.map((fields, index) => {
        let hide = false;
        let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@3faupq@${index}`} fieldConfig={fields} form={formCondition} formParams={formParams}/>;
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@547fbz@${index}`}
              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@wh81no@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
    });
    return group;
  }

  render() {
    const {
      hrmOrganization
    } = this.props;
    const {
      tabs,
      tabKey,
      formCondition,
      condition,
      showSearchAd,
      quickSearchName
    } = hrmOrganization;

    if (tabKey == '1') {
      return (
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@kskmvg`}
          type='editable-inline'
          keyParam='key'
          datas={toJS(tabs)}
          selectedKey={tabKey}
          onChange={ v => {
            hrmOrganization.updateTabkey(v);
          }}
        />
      );
    } else {
      const formConditionParams = formCondition.getFormParams();

      return (
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@pd65cw`}
          type='editable-inline'
          keyParam='key'
          datas={toJS(tabs)}
          selectedKey={tabKey}
          onChange={ v => {
            hrmOrganization.updateTabkey(v);
          }}
          buttonsAd={this.getTabButtonsAd()}
          searchType={['base','advanced']}
          searchsBaseValue={formConditionParams[quickSearchName]}
          setShowSearchAd={bool => {hrmOrganization.setShowSearchAd(bool)}}
          hideSearchAd={() => hrmOrganization.setShowSearchAd(false)}
          searchsAd={<div
            onKeyDown={(e) => {
              if (e.keyCode == 13 && e.target.tagName === "INPUT") {
                hrmOrganization.setShowSearchAd(false);
                hrmOrganization.doSearch()
              }
            } 
          }
          ><Form ecId={`${this && this.props && this.props.ecId || ''}_Form@a0f4pm`} horizontal>{this.getSearchs()}</Form></div>}
          showSearchAd={showSearchAd}
          onSearch={v => {hrmOrganization.doSearch()}}
          advanceHeight={180}
          onSearchChange={value => {
            formCondition.updateFields({ [quickSearchName]: { value } })
          }}
        />
      );
    }
  }
}

export default OrganizationTabInfo