import {
  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 '../../../../util/pulic-func';
import {
  WeaLocaleProvider
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

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

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

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

    return <Spin spinning={loading}><Row
      onKeyDown={(e) =>{
          if (e.keyCode == 13 && e.target.tagName === "INPUT") {
            store.searchLogInfo(); 
            store.setLogPanelStatus(false)
            }
        }
      }
    >{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 />)
    ];
    return buttons
  }

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

    return [
      (<Button type="primary" onClick={() => {searchLogInfo(); setLogPanelStatus(false)}}>{ getLabel(82529, '搜索')}</Button>),
      (<Button onClick={() => form.reset()}>{getLabel(27088, '重置')}</Button>),
      (<Button onClick={() => setLogPanelStatus(false)}>{getLabel(32694, '取消')}</Button>),
    ];
  }

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

    return (
      <WeaDialog
  				  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
                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 
                 comsWeaTableStore={tableStore}
                 hasOrder={true}
                 needScroll={true}
                 scroll={{y: height-125}}
                 rowKey={(record,index) => index}
                 getColumns={c => this.reRenderColumns(c)}
             />
  			</WeaDialog>
    )
  }
}