import {
  WeaTab,
  WeaDialog,
  WeaFormItem,
  WeaMoreButton,
} from 'ecCom'

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

import {
  WeaSwitch,
  WeaTableNew
} from 'comsMobx'

import {
  jumpToHrmCard
} from '../../public/pulic-func'

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

const WeaTable = WeaTableNew.WeaTable;

export default class ImportLog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 950,
      height: 510,
      isPanelShow: false,
      conditionNumber: 4,
    }
  }

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

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

    let arr = [];
    isFormInit && importLogCondition.map(c => {
      c.items.map((field, index) => {
        arr.push(
          <Col span={(index%2 == 0) ?10 :11} offset={1}>
                  		<div style={{marginTop: 10}} className='hrm-date-group'>
                  		    <WeaFormItem
                  		        label={`${field.label}`}
                  		        labelCol={{span:6}}
                  		        wrapperCol={{span: 18}}>
                  		            {<WeaSwitch fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                  		    </WeaFormItem>
                  		</div>
            		 </Col>
        )
      })
    })

    return <Row>{arr}</Row>
  }

  setPanelStatus(bool) {
    this.setState({
      isPanelShow: bool
    });
  }

  reRenderColumns(c) {
    let _this = this;
    c.forEach(item => {
      if (item.dataIndex == 'operator') {
        item.render = function(text, record) {
          return <span><a onClick={ () => jumpToHrmCard(record.operator)}>{record.operatorspan}</a></span>
        }
      }
    });
  }

  render() {
    const {
      title,
      visible,
      onCancel,
      search,
      tableStore,
      form,
      loading
    } = this.props, {
      width,
      height,
      isPanelShow,
      conditionNumber
    } = this.state;

    const btn = [
      (<Button type="primary" onClick={() => {search(); this.setPanelStatus(false)}}>{i18n.button.search()}</Button>),
      (<Button onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
      (<Button onClick={() => this.setPanelStatus(false)}>{i18n.button.cancel()}</Button>),
    ];

    const buttons = [
      (<WeaMoreButton />)
    ];

    return (
      <WeaDialog
  				  title={title}
  				  icon="icon-coms-hrm"
            iconBgcolor="#217346"
            visible={visible}
            closable={true}
            hasScroll={true}
            onCancel={() => { onCancel(); this.setPanelStatus(false) } }
            buttons={buttons}
            style={{width: width, height: height}}
            onChangeHeight={(h) => this.setState({height: h})}
  			>
  					<WeaTab
                searchType={['advanced']}
                showSearchAd={isPanelShow}
                setShowSearchAd={ bool => this.setPanelStatus(bool) } 
                hideSearchAd={ () => this.setPanelStatus(false) }
                searchsAd= {this.getPanelComponents()}
                advanceHeight={ Math.ceil(conditionNumber / 2) * 42 + 10}
                hasMask={false}
                buttonsAd={btn}
                onSearch={() => search()}
            />
            <WeaTable 
                 comsWeaTableStore={tableStore}
                 hasOrder={true}
                 needScroll={true}
                 scroll={{y: height-125}}
                 rowKey={(record,index) => index}
                 getColumns={c => this.reRenderColumns(c)}
             />
  			</WeaDialog>
    )
  }
}