import {
  inject,
  observer
} from 'mobx-react';
import {
  WeaTab,
  WeaDialog,
  WeaFormItem,
  WeaMoreButton,
  WeaLocaleProvider,
} from 'ecCom'
import {
  Row,
  Col,
  Spin,
  Button,
} from 'antd'
import {
  WeaSwitch,
  WeaTableNew
} from 'comsMobx'
import {
  jumpToHrmCard
} from '../util/pure-util'
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ImportLog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 870,
      height: 510,
      isPanelShow: false,
      num: 5,
    }
  }

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

    let arr = [];
    isFormInit && condition.map(c => {
      c.items.map((field, index) => {
        arr.push(
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5b709m@${index}`} span={(index + 1) / 2 == 1 ? 13 : 9} offset={(index + 1) % 2 == 0 ? 1 : 0}>
              <div style={{marginTop: 10}} className='hrm-date-group'>
                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@5bh9tc@${index}`}
                      label={`${field.label}`}
                      labelCol={{span: index == 1 ? 5: `${field.labelcol}`}}
                      wrapperCol={{span: `${field.fieldcol}`}}>
                          {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@qp4k1y@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                  </WeaFormItem>
              </div>
          </Col>
        )
      })
    })

    return <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rdtj2l`} spinning={loading}><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xdh3qs`}>{arr}</Row></Spin>
  }

  reRenderColumns(c) {
    c.forEach(item => {
      if (item.dataIndex == 'operator') {
        item.render = function(text, record) {
          return <span><a style={{cursor:'pointer', color: '#4D7AD8'}} onClick={ () => jumpToHrmCard(record.operator)}>{record.operatorspan}</a></span>
        }
      }
      if (item.dataIndex == 'status') {
        item.render = function(text, record) {
          return <span>{record.status == '1' ? <span style={{color: 'rgb(84, 211, 162)'}}>{getLabel(15242, '成功')}</span> : <span style={{color: 'rgb(255, 0, 0)'}}>{getLabel(498, '失败')}</span>}</span>
        }
      }
    });
  }

  getDialogButtons = () => {
    const buttons = [
      (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@aowxpv`} />)
    ];
    return buttons
  }

  getSearchPanelButtons = () => {
    const {
      hrmImportCommon
    } = this.props, {
      searchLogInfo,
      setLogPanelStatus,
      logDialog,
    } = hrmImportCommon, {
      form
    } = logDialog;

    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b78v81`} type="primary" onClick={() => {searchLogInfo(); setLogPanelStatus(false)}}>{getLabel(82529, '搜索')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ptulq8`} onClick={() => form.reset()}>{getLabel(27088, '重置')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@icgrbe`} onClick={() => setLogPanelStatus(false)}>{getLabel(32694, '取消')}</Button>),
    ];
  }

  render() {
    const {
      hrmImportCommon
    } = this.props, {
      logDialog,
      setLogDialogVisible,
      setLogPanelStatus,
    } = hrmImportCommon, {
      title,
      visible,
      isPanelShow,
      tableStore,
    } = logDialog, {
      width,
      height,
      num
    } = this.state;

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ziw0jn`}
  				  title={title}
  				  icon="icon-coms-hrm"
            iconBgcolor="#217346"
            visible={visible}
            closable={true}
            onCancel={() => setLogDialogVisible(false)}
            buttons={this.getDialogButtons()}
            style={{width: width, height: height}}
            onChangeHeight={h => this.setState({height: h})}
  			>
  					<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@dy9l77`}
                searchType={['advanced']}
                showSearchAd={isPanelShow}
                setShowSearchAd={ bool => setLogPanelStatus(bool) } 
                hideSearchAd={ () => setLogPanelStatus(false) }
                searchsAd= {this.getPanelComponents()}
                advanceHeight={ Math.ceil(num / 2) * 42 + 10}
                hasMask={false}
                buttonsAd={this.getSearchPanelButtons()}
            />
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@m1731g`} 
                 comsWeaTableStore={tableStore}
                 hasOrder={true}
                 needScroll={true}
                 scroll={{y: height-125}}
                 rowKey={(record,index) => index}
                 getColumns={c => this.reRenderColumns(c)}
             />
  			</WeaDialog>
    )
  }
}