import {
  WeaTab,
  WeaFormItem,
} from 'ecCom'

import {
  Row,
  Col,
  Spin,
  Button,
} from 'antd';

import {
  WeaSwitch
} from 'comsMobx'

import {
  i18n
} from '../../public/i18n';

export default class TabInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 2, //高级搜索中condition的数量，用于设置下拉面板的高度
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.condition !== nextProps.condition) {
      let c = nextProps.condition;
      if (c.length > 0) {
        this.setState({
          num: c[0].items.length
        });
      }
    }
  }

  getButtons() {
    const {
      search,
      form,
      setPanelStatus
    } = this.props;

    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@o0221r`} type="primary" onClick={() => search()}>{i18n.button.search()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ohvqhe`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fboeon`} onClick={() => setPanelStatus(false)}>{i18n.button.cancel()}</Button>),
    ];
  }

  getPanelComponents() {
    const {
      condition,
      form,
      loading,
      isFormInit
    } = this.props;

    let arr = [];
    isFormInit && condition.map(c => {
      c.items.map((field, index) => {
        arr.push(
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@kevz9t@${index}`} span={11} offset={(index+1)%2!==0?1:0}>
            <div style={{marginTop: 20}}>
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@469gf2@${index}`}
                  label={`${field.label}`}
                  labelCol={{span: `${field.labelcol}`}}
                  wrapperCol={{span: `${field.fieldcol}`}}>
                      {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@4shno5@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
              </WeaFormItem>
            </div>
          </Col>
        )
      })
    })

    if (loading) {
      return (
        <div className='hrm-loading-center-small' style={{top:'25%'}}>
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rugix1`} spinning={loading}></Spin>
        </div>
      )
    } else {
      return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nxowf4`}
        onKeyDown={(e) =>( e.keyCode == 13 && e.target.tagName === "INPUT")  && this.props.onSearch()}
      >{arr}</Row>
    }
  }

  render() {
    const {
      search,
      onSearchChange,
      searchsBaseValue,
      selectedKey,
      setPanelStatus,
      isPanelShow,
      tabName,
      searchType,
      setSelectedKey
    } = this.props, {
      num
    } = this.state;

    return (
      <div>
  		    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@8ei4uh`}
  			   	  selectedKey={selectedKey}
  			   	  datas={tabName}
  			   	  keyParam='key'
  			   	  onChange={key => setSelectedKey(key)}
              searchType={searchType}
              showSearchAd={isPanelShow}
              searchsBaseValue={searchsBaseValue}
              setShowSearchAd={ bool => setPanelStatus(bool) } 
              hideSearchAd={ () => setPanelStatus(false) }
              searchsAd= {isPanelShow ? this.getPanelComponents() : <div></div>}
              advanceHeight={ Math.ceil(num / 2) * 52 + 20}
              hasMask={false}
              buttonsAd={this.getButtons()}
              onSearch={() => search()}
              onSearchChange={ val => onSearchChange(val)}
          />
  		</div>
    )
  }
}