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

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 {
            store
        } = this.props, {
            jumpToImportResult
        } = store;


        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 {
            store
        } = this.props, {
            recordDialog,
            queryLog,
        } = store, {
            loading
        } = recordDialog;

        return [
            (<Button type="primary" disabled={loading} onClick={() => queryLog()}>{getLabel(384041, '查看导入日志')}</Button>),
            (<WeaMoreButton />)
        ];
    }

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

        return (
            <div>
                <WeaDialog
                    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 
                        comsWeaTableStore={tableStore}
                        hasOrder={true}
                        needScroll={true}
                        scroll={{y: height - 80}}
                        rowKey={(record,index) => index}
                        getColumns={c => this.reRenderColumns(c)}
                    />
                </WeaDialog>
                {logDialog.visible && <ImportLog store={store}/>}
                {resultDialog.visible && <ImportResult store={store}/>}
            </div>
        )
    }
}