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

import ImportLog from './ImportLog'
import ImportResult from './ImportResult'

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

    reRenderColumns(c) {
        const {
            hrmImportCommon
        } = this.props, {
            jumpToImportResult
        } = hrmImportCommon;


        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 == 'allnum') {
                item.render = function(text, record) {
                    return <span><a style={{cursor:'pointer', color: '#4D7AD8'}} onClick={ () => jumpToImportResult(record.randomFieldId)}>{record.allnumspan}</a></span>
                }
            }
        });
    }

    getButtons() {
        const {
            hrmImportCommon
        } = this.props, {
            recordDialog,
            queryLog,
        } = hrmImportCommon, {
            loading
        } = recordDialog;

        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3u5z3l`} type="primary" disabled={loading} onClick={() => queryLog()}>{getLabel(384041, '查看导入日志')}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@y6jgcu`} />)
        ];
    }

    render() {
        const {
            hrmImportCommon
        } = this.props, {
            recordDialog,
            logDialog,
            resultDialog,
            setRecordDialogVisible
        } = hrmImportCommon, {
            title,
            visible,
            tableStore
        } = recordDialog, {
            width,
            height
        } = this.state;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@2wh644`}
                    title={title}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    onCancel={() => setRecordDialogVisible(false)}
                    buttons={this.getButtons()}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({height: h})}
                >
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@axofdt`} 
                        comsWeaTableStore={tableStore}
                        hasOrder={true}
                        needScroll={true}
                        scroll={{y: height - 80}}
                        rowKey={(record,index) => index}
                        getColumns={c => this.reRenderColumns(c)}
                    />
                </WeaDialog>
                {logDialog.visible && <ImportLog ecId={`${this && this.props && this.props.ecId || ''}_ImportLog@m9tqlv`} hrmImportCommon={hrmImportCommon}/>}
            </div>
        )
    }
}