import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaDialog,
    WeaMoreButton,
} from 'ecCom'
import {
    Button,
} from 'antd'
import {
    WeaTableNew
} from 'comsMobx';
import {
    jumpToHrmCard
} from '../../public/pulic-func'
import {
    i18n
} from '../../public/i18n';
const WeaTable = WeaTableNew.WeaTable;

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

@inject('hrmImportCommon')
@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@hx1otx`} type="primary" disabled={loading} onClick={() => queryLog()}>{i18n.button.queryImportLog()}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@cur7ze`} />)
        ];
    }

    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@tzk77o`}
                    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@dvybzb`} 
                        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@n0ywqs`} />}
                {resultDialog.visible && <ImportResult ecId={`${this && this.props && this.props.ecId || ''}_ImportResult@7v5kvz`} />}
            </div>
        )
    }
}