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

import {
  Row,
  Col,
  Spin,
  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: 870,
      height: 510,
      isPanelShow: false,
      num: 4,
    }
  }

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

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

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

    if (loading) {
      return (
        <div className='hrm-loading-center-small' style={{top:'30%'}}>
                    <Spin spinning={loading}></Spin>
                </div>
      )
    } else {
      return <Row>{arr}</Row>
    }
  }

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

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

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

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

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

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