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

import {
    Row,
    Col,
    Icon,
    Spin,
    Modal,
    Table,
    Button,
} from 'antd'
import isEmpty from 'lodash/isEmpty';
import React from 'react'
import {
    WeaTableNew
} from 'comsMobx';
import {
    toJS
} from 'mobx';

const WeaTable = WeaTableNew.WeaTable;
import {
    i18n
} from '../../public/i18n';

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

    componentDidMount() {
        const {
            hrmImportResource
        } = this.props;
        hrmImportResource.errorInfo = '';
    }

    getButtons() {
        const {
            hrmImportResource
        } = this.props;
        const {
            failnum,
            importStatus
        } = hrmImportResource;
        const buttons = [];
        if (importStatus == 'over') {
            // if (failnum > 0) {
            //     buttons.push(<Button type="primary" onClick={() => this.submit()}>下载错误数据</Button>);
            // }
            // buttons.push(<Button type="primary" onClick={() => this.submit()}>下载全部数据</Button>);
            buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@w1j5fh`} type="primary" onClick={() => this.getImportLog()}>{i18n.button.getImportLog()}</Button>);
        }

        return buttons;
    }

    reRenderColumns(c) {
        c.forEach(item => {
            if (item.dataIndex == 'operatedetail') {
                item.render = function(text, record) {
                    return <span style={{ color: '#FF0000' }}>{text}</span>
                }
            }
        });
    }

    cancel() {
        const {
            hrmImportResource
        } = this.props;
        this.dialogKey = new Date().getTime();
        hrmImportResource.visibleResult = false;
    }

    getImportLog() {
        const {
            hrmImportResource
        } = this.props;
        hrmImportResource.visibleImportLog = true;
        let params = {};
        params.importType = 'resource';
        hrmImportResource.getImportLogSearchCondition(params);
        hrmImportResource.getImportLogDetail(params);
    }

    render() {
        const {
            hrmImportResource
        } = this.props;
        const {
            titleResult,
            visibleResult,
            importResultColumns,
            importProcessLogDatas,
            failnum,
            succnum,
            importResultTip,
            importResultStore,
            importStatus,
            errorInfo,
            setScrollRef,
            dialogKey
        } = hrmImportResource;
        const buttons = [];
        if (importStatus == 'over') {
            buttons.push(
                {
                    key: '1',
                    content: i18n.button.getImportLog(),
                    icon: <i className='icon-coms-Preservation'/>,
                    onClick: () => this.getImportLog(),
                }
            );
        }
        return (
            <div>
            { 
                visibleResult &&
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@a3ftyh`}
                    key={dialogKey}
                    title={titleResult()}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visibleResult}
                    closable={true}
                    onCancel={() => this.cancel()}
                    buttons={this.getButtons()}
                    style={{ width: 720, height: 480 }}
                    moreBtn={{datas:buttons}}
                >
                <div className="hrm-import-dialog">
                    {
                        importStatus == '' || importStatus == 'importing' || importStatus == 'error'?<div>
                            {
                                importStatus == 'error'?<div className="hrm-import-result-icon" style={{ paddingTop: 15 }}>
                                                <div style={{ width: 30, height: 30, borderRadius: 25, padding: 8, display: 'inline-block', backgroundColor:'#FF0000' }}>
                                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@gxbhrn`} type={'cross'} style={{ color: '#fff' }} />
                                                </div><span style={{ paddingLeft: 5}}>{importResultTip}</span>
                                                </div>:
                                                <div className="hrm-import-process"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@u5jll2`} tip={i18n.message.serverImportProcessing()}></Spin></div>
                            }
                            <div className="wea-new-table">
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@iflhfl`} height={340} ref={(scroll)=>{
hrmImportResource.setScrollTarget(scroll)
}}>
                                    <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@quyttr`} dataSource={toJS(importProcessLogDatas)} columns={toJS(importResultColumns)} pagination={false} />
                                </WeaNewScroll>
                            </div>
                        </div> : <div>
                                <div className="hrm-import-result-icon" style={{ paddingTop: failnum == 0 ? 150 : 15 }}>
                                    <div style={{ width: 30, height: 30, borderRadius: 25, padding: 8, display: 'inline-block', backgroundColor: succnum > 0 ? '#54D3A2' : '#FF0000' }}>
                                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@2fblod`} type={succnum > 0 ? 'check' : 'cross'} style={{ color: '#fff' }} />
                                    </div><span style={{ paddingLeft: 5 }}>{importResultTip}</span>
                                </div>
                                {
                                    failnum > 0 &&
                                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@h7l6fo`}
                                        comsWeaTableStore={importResultStore}
                                        bordered
                                        needScroll={true}
                                        // pagination={true}
                                        scroll={{ y: 330 }}
                                        // rowKey={(record, index) => index}
                                        getColumns={c => this.reRenderColumns(c)}
                                    />
                                }
                            </div>
                    }
                </div>
            </WeaDialog>
            }
            </div>
        )
    }
}

export default ImportResult