import {
  inject,
  observer
} from 'mobx-react';
import {
  WeaTab,
  WeaDialog,
  WeaFormItem,
  WeaSearchGroup,
} from 'ecCom'

import {
  Row,
  Col,
  Button,
} from 'antd'
import * as mobx from 'mobx';
const toJS = mobx.toJS;
import {
  WeaSwitch
} from 'comsMobx'
import {
  WeaTableNew
} from 'comsMobx';
import React from 'react'

const WeaTable = WeaTableNew.WeaTable;
import {
  i18n
} from '../../public/i18n';

@inject('hrmImportResource')
@observer
class ImportLog extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {

  }

  getSearchs() {
    const {
      hrmImportResource
    } = this.props;
    const {
      form,
      searchCondition
    } = hrmImportResource;

    const {
      isFormInit
    } = form;
    let group = [];

    const formParams = form.getFormParams();
    isFormInit && toJS(searchCondition).map((c, i) => {
      let items = [];
      c.items.map((fields, index) => {
        let hide = false;
        let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@irw1ly@${index}`} fieldConfig={fields} form={form} formParams={formParams}/>;
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3cqs16@${index}`}
                  label={`${fields.label}`}
                  labelCol={{span: `${fields.labelcol}`}}
                  wrapperCol={{span: `${fields.fieldcol}`}}>
                    {dom}
                  </WeaFormItem>),
          colSpan: 1,
          hide: hide
        })
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@8sj3te@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}/>)
    });
    return group;
  }

  jumpToHrmCard(id) {
    window.open(`/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${id}`);
  }

  reRenderColumns(c) {
    let _this = this;
    let status = "";
    c.forEach(item => {
      if (item.dataIndex == 'operator') {
        item.render = function(text, record) {
          return <span><a onClick={ () => _this.jumpToHrmCard(record.operator)}>{record.operatorspan}</a></span>
        }
      } else if (item.dataIndex == 'status') {
        item.render = function(text, record) {
          status = text;
          return <span style={{ color: text=='1'?"":"#FF0000"}}>{text=='1'?i18n.label.success():i18n.label.fail()}</span>
        }
      } else if (item.dataIndex == 'operatedetail') {
        item.render = function(text, record) {
          return <span style={{ color: "#FF0000" }}>{status=="1"?"":text}</span>
        }
      }
    });
  }

  cancel() {
    const {
      hrmImportResource
    } = this.props;
    hrmImportResource.visibleImportLog = false;
  }

  render() {
    const {
      hrmImportResource,
      viewLogTitle
    } = this.props;
    const {
      form,
      titleImportLog,
      visibleImportLog,
      importLogStore,
      showSearchAd
    } = hrmImportResource;
    const btn = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@a9qnqh`} type="primary" onClick={()=>{hrmImportResource.doSearch();hrmImportResource.showSearchAd=false}}>{i18n.button.search()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bi5gen`} type="ghost" onClick={()=>{form.reset();}}>{i18n.button.reset()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@co57et`} type="ghost" onClick={()=>hrmImportResource.showSearchAd=false}>{i18n.button.cancel()}</Button>)
    ]
    return (
      <div>
        {
          visibleImportLog && 
          <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@h4j5ho`}
              title={viewLogTitle || titleImportLog()}
              icon="icon-coms-hrm"
              iconBgcolor="#217346"
              visible={visibleImportLog}
              closable={true}
              onCancel={() => { this.cancel()} }
              //buttons={buttons}
              style={{width: 970, height: 510}}
          >
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@98vruz`}
                  searchType={['advanced']}
                  showSearchAd={showSearchAd}
                  searchsAd={<div
                    onKeyDown={(e) =>{
                      if (e.keyCode == 13 && e.target.tagName === "INPUT") {
                        hrmImportResource.doSearch();
                        hrmImportResource.showSearchAd=false
                        }
                    }
                  }
                    >{this.getSearchs()}</div>}
                  setShowSearchAd={bool => {hrmImportResource.showSearchAd = bool}}
                  hideSearchAd={() => hrmImportResource.showSearchAd = false}
                  advanceHeight={200}
                  hasMask={false}
                  buttonsAd={btn}
              />
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@8ajuei`} 
                  comsWeaTableStore={importLogStore}
                  hasOrder={true}
                  needScroll={true}
                  scroll={{ y: 380 }}
                  rowKey={(record,index) => index}
                  getColumns={c => this.reRenderColumns(c)}
              />
          </WeaDialog>
        }
      </div>
    )
  }
}

export default ImportLog