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

import {
    Modal,
    Table,
    Button,
} from 'antd'

import React from 'react'
import { WeaTableNew } from 'comsMobx';
import ImportLog from './ImportLog'

const WeaTable = WeaTableNew.WeaTable;

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

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

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

    jumpToImportResult(pId) {
        const { hrmImportOrg } = this.props;
        hrmImportOrg.visibleResult = true;
        hrmImportOrg.getImportResult({ pId });
    }

    queryImportLog() {
        const { hrmImportOrg } = this.props;
        hrmImportOrg.getImportLogDetail();
        hrmImportOrg.getImportLogSearchCondition();
        hrmImportOrg.visibleImportLog = true;
    }

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

    render() {
        const { hrmImportOrg } = this.props;
        const { titleHistory, visibleHistory, onCancel, importHistoryStore } = hrmImportOrg;
        const buttons = [
            (<Button type="primary" disabled={importHistoryStore.loading} onClick={() => this.queryImportLog()}>查看导入日志</Button>),
            (<Button disabled>更多>></Button>)
        ];
        return (
            <div>
                <ImportLog {...this.props} />
                {
                    visibleHistory && 
                    <WeaDialog
                        title={titleHistory}
                        icon="icon-coms-hrm"
                        iconBgcolor="#217346"
                        visible={visibleHistory}
                        closable={true}
                        onCancel={() => this.cancel()}
                        buttons={buttons}
                        style={{ width: 870, height: 510 }}
                    >
                    <WeaTable
                        comsWeaTableStore={importHistoryStore}
                        hasOrder={true}
                        needScroll={true}
                        scroll={{ y: 430 }}
                        rowKey={(record, index) => index}
                        getColumns={c => this.reRenderColumns(c)}
                    />
                    </WeaDialog>
                }
            </div>
        )
    }
}

export default ImportHistory