import {
  inject,
  observer
} from 'mobx-react';
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/i18nbk';
const WeaTable = WeaTableNew.WeaTable;

@inject('hrmImportCommon')
@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@f21exb@${index}`} span={(index + 1) / 2 == 1 ? 13 : 9} offset={1}>
              <div style={{marginTop: 10}} className='hrm-date-group'>
                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@osq1ux@${index}`}
                      label={`${field.label}`}
                      labelCol={{span: index == 1 ? 5: `${field.labelcol}`}}
                      wrapperCol={{span: `${field.fieldcol}`}}>
                          {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@awbwzy@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} />}
                  </WeaFormItem>
              </div>
          </Col>
        )
      })
    })

    return <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@wot9li`} spinning={loading}><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mr5pe2`}
      onKeyDown={(e) =>{
        if( e.keyCode == 13 && e.target.tagName === "INPUT") {
        hrmImportCommon.searchLogInfo(); 
        hrmImportCommon.setLogPanelStatus(false)
      } }
    }
    >{arr}</Row></Spin>
  }

  reRenderColumns = (c) => {
    c.forEach((item, i) => {
      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)'}}>{i18n.label.success()}</span> : <span style={{color: 'rgb(255, 0, 0)'}}>{i18n.label.fail()}</span>}</span>
        }
      }
    });
  }

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

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

    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1im1mb@1`} type="primary" onClick={() => {searchLogInfo(); setLogPanelStatus(false)}}>{i18n.button.search()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kwzalq@2`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qwyez5@3`} onClick={() => setLogPanelStatus(false)}>{i18n.button.cancel()}</Button>),
    ];
  }

  getRowKey = (record,index) => index

  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@jvqq5g`}
  				  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@kz5pkf`}
                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@vx7etm`} 
                 comsWeaTableStore={tableStore}
                 hasOrder={true}
                 needScroll={true}
                 scroll={{y: height-125}}
                 rowKey={this.getRowKey}
                 getColumns={this.reRenderColumns}
             />
  			</WeaDialog>
    )
  }
}