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;

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

    componentWillReceiveProps (nextProps){
    
    }

    getSearchs() {
        const { hrmImportOrg } = this.props;
        const { form,searchCondition } = hrmImportOrg;
    
        const {isFormInit} = form;
        let group = [];
    
        const formParams = form.getFormParams();
        isFormInit && toJS(searchCondition).map(c =>{
          let items = [];
          c.items.map(fields => {
            let hide = false;
            let dom =  <WeaSwitch fieldConfig={fields} form={form} formParams={formParams}/>;
            items.push({
              com:(<WeaFormItem
                  label={`${fields.label}`}
                  labelCol={{span: `${fields.labelcol}`}}
                  wrapperCol={{span: `${fields.fieldcol}`}}>
                    {dom}
                  </WeaFormItem>),
              colSpan:1,
              hide: hide
            })
          });
          group.push(<WeaSearchGroup 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;
        c.forEach( item => {
            if(item.dataIndex == 'operator'){
                item.render = function(text, record){
                    return  <span><a style={{cursor:'pointer', color: '#4D7AD8'}} onClick={ () => _this.jumpToHrmCard(record.operator)}>{record.operatorspan}</a></span>
                }
            }
        });
    }

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

  	render(){
    const { hrmImportOrg } = this.props;
    const { form,titleImportLog, visibleImportLog, importLogStore, showSearchAd } = hrmImportOrg;
    const btn = [
            (<Button type="primary" onClick={()=>{hrmImportOrg.doSearch();hrmImportOrg.showSearchAd=false}}>搜索</Button>),
            (<Button type="ghost" onClick={()=>{form.reset();}}>重置</Button>),
            (<Button type="ghost" onClick={()=>hrmImportOrg.showSearchAd=false}>取消</Button>)
        ]
      const buttons = [
          (<Button disabled>更多>></Button>)
      ];
  		return (
            <div>
                {
                    visibleImportLog && 
                    <WeaDialog
                    title={titleImportLog}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visibleImportLog}
                    closable={true}
                    onCancel={() => { this.cancel()} }
                    buttons={buttons}
                    style={{width: 870, height: 510}}
                      >
                      <WeaTab
                        searchType={['advanced']}
                        showSearchAd={showSearchAd}
                        searchsAd={<div onKeyDown={(e) => {
                          if (e.keyCode == 13&& e.target.tagName === "INPUT")
                          {
                            hrmImportOrg.doSearch();
                            hrmImportOrg.showSearchAd=false}
                          }
                        } }>{this.getSearchs()}</div>}
                        setShowSearchAd={bool => {hrmImportOrg.showSearchAd = bool}}
                        hideSearchAd={() => hrmImportOrg.showSearchAd = false}
                        advanceHeight={190}
                        hasMask={false}
                        buttonsAd={btn}
                    />
                    <WeaTable 
                        comsWeaTableStore={importLogStore}
                        hasOrder={true}
                        needScroll={true}
                        rowKey={(record,index) => index}
                        getColumns={c => this.reRenderColumns(c)}
                    />
                      </WeaDialog>
                }
            </div>
  		)
  	}
}

export default ImportLog