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 = {
      conditionNum: 2, //高级搜索中condition的数量，用于设置下拉面板的高度
    }
  }

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

  //获取高级搜索中的表单元素
  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@ds1e24@${index}`} span={10} offset={1}>
                        <div style={{marginTop: 20}}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@n45nfc@${index}`}
                                label={`${field.label}`}
                                labelCol={{span: `${field.labelcol}`}}
                                wrapperCol={{span: `${field.fieldcol}`}}>
                                    {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@0jkw6c@${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@cxromh`} spinning={loading}></Spin>
        </div>
      )
    } else {
      return <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@8cm2w6`} onKeyDown={(e) =>( e.keyCode == 13&& e.target.tagName === "INPUT" )  && this.props.search()}>{arr}</Row>
    }

  }

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

    const btn = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b6j988`} type="primary" onClick={() => search()}>{i18n.button.search()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1epb7o`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xieldd`} onClick={() => setPanelStatus(false)}>{i18n.button.cancel()}</Button>),
    ];

    return (
      <div>
  		    	<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9byc7b`}
  			    	  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(conditionNum / 2) * 52 + 20}
                hasMask={false}
                buttonsAd={btn}
                onSearch={() => search()}
                onSearchChange={ (val) => onSearchChange(val)}
            />
  		    </div>
    )
  }
}