import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaDialog,
    WeaNewScroll,
    WeaMoreButton,
} from 'ecCom'
import {
    Row,
    Col,
    Icon,
    Spin,
    Modal,
    Table,
    Button,
} from 'antd'
import {
    WeaTableNew
} from 'comsMobx';
import {
    toJS
} from 'mobx';
import {
    i18n
} from '../../public/i18nbk';
const WeaTable = WeaTableNew.WeaTable;

import ImportLog from './ImportLog'

@inject('hrmImportCommon')
@observer
export default class ImportResult extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 740,
            height: 450,
        }
    }

    getButtons = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog,
            setLogDialogVisible,
        } = hrmImportCommon, {
            failnum,
            succnum,
            importStatus
        } = resultDialog;

        const buttons = [];

        if (importStatus == 'over' || importStatus == 'error') {
            // if (failnum > 0 && succnum > 0) {
            //     buttons.push(<Button type="primary" disabled onClick={() => {}}>{i18n.button.downloadErrorDatas()}</Button>);
            // }
            // buttons.push(<Button type="primary" disabled onClick={() => {}}>{i18n.button.downloadAllDatas()}</Button>);
            buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xjt7px@1`} type="primary" onClick={() => setLogDialogVisible(true)}>{i18n.button.getImportLog()}</Button>);
        }
        buttons.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@u1p339@2`} />);

        return buttons;
    }

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

    getErrorInfo = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog
        } = hrmImportCommon, {
            errorTip,
            errorInfo
        } = resultDialog

        const columns = [{
            "title": i18n.label.confirmInfo(),
            "width": "100%",
            "dataIndex": "message",
            render: (text, record, index) => {
                return <span style={{ color: '#FF0000' }}>{text}</span>
            }
        }];

        const elements = <div style={{color: '#FF0000'}} className='hrm-import-table-th'>
                            <div style={{margin: '20px 0'}}>
                                <div className='hrm-import-error-tip'>
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@wyt0r2`} type={'cross'} style={{ color: '#fff',fontSize: 18 }} />
                                </div>
                                {errorTip}
                            </div>
                            <div style={{padding: '0 30px'}}><Table ecId={`${this && this.props && this.props.ecId || ''}_Table@n5hlge`} dataSource={errorInfo} columns={columns} pagination={false} bordered/></div>
                         </div>;
        return elements;
    }

    getRowKey = (record,index) => index

    getResultInfo = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog
        } = hrmImportCommon, {
            succnum,
            failnum,
            tableStore,
        } = resultDialog, {
            height
        } = this.state;

        const icon = <div style={{backgroundColor: succnum>0 ? '#54D3A2' : '#FF0000',marginLeft: 270 }} className='hrm-import-error-tip'>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@4ysuuf`} type={succnum>0 ? 'check' : 'cross'} style={{ color: '#fff',fontSize: 18 }} />
                      </div>;
        const tip = <span style={{color: succnum > 0 ? '#54D3A2' : '#FF0000'}}>{(succnum > 0 && failnum == 0) ? i18n.label.importResourceResultInfo1().replace('{rownum}',`${succnum+failnum}`) : i18n.label.importResourceResultInfo().replace('{rownum}',`${succnum+failnum}`).replace('{succnum}',`${succnum}`)}</span>

        const resultTable = ((succnum + failnum > 0) && failnum > 0) && <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@frpkmr`}
                                                                            comsWeaTableStore={tableStore}
                                                                            bordered
                                                                            pagination={true}
                                                                            rowKey={this.getRowKey}
                                                                            getColumns={this.reRenderColumns}
                                                                        />
        return <div>
                    <div style={( (succnum + failnum > 0) && failnum > 0) ? {marginTop: 20} : {marginTop: height/2 -30}}>{icon}{tip}</div>
                    <div style={{padding: '10px 20px'}}>{resultTable}</div>
                </div>
    }

    getImportProcessInfo = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog
        } = hrmImportCommon, {
            datas,
            importStatus
        } = resultDialog;

        const columns = [{
            "title": i18n.label.row(),
            "width": "15%",
            "dataIndex": "rownum"
        }, {
            "title": i18n.label.status(),
            "width": "15%",
            "dataIndex": "status",
            render: (text, record, index) => {
                return <span style={{ color: text=='1'?'#54D3A2':'#FF0000'}}>{text=='1'?i18n.label.success():i18n.label.fail()}</span>
            }
        }, {
            "title": i18n.label.confirmInfo(),
            "width": "70%",
            "dataIndex": "message",
            render: (text, record, index) => {
                return <span style={{ color: '#FF0000' }}>{text}</span>
            }
        }];

        const loadingTip = (importStatus !== 'over' || importStatus !== 'error') && <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@x3net9`} tip={i18n.message.serverImportProcessing()}></Spin>;

        const processTable = <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@muy1kg`} dataSource={toJS(datas)} columns={columns} pagination={false} bordered/>

        return <div className='hrm-import-ant-table'>
                    <div style={{margin: '20px 0',paddingLeft: 260}} className='hrm-import-loading'>{loadingTip}</div>
                    <div style={{padding: '0 20px 10px'}}>{processTable}</div> 
                </div>
    }

    render() {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog,
            logDialog,
            setResultInfoDialogVisible,
            hasErrorInfo,
            setScoll
        } = hrmImportCommon, {
            title,
            visible,
            importStatus,
            errorInfo,
            loading
        } = resultDialog, {
            width,
            height
        } = this.state;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@gd6824`}
                    title={title}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    onCancel={() => setResultInfoDialogVisible(false)}
                    buttons={this.getButtons()}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({height: h})}
                >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@inu6ic`} spinning={loading}> 
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@kdauka`} height={height} ref={com => setScoll(com)}>
                            {
                                 !loading && (hasErrorInfo(errorInfo) ? this.getErrorInfo(errorInfo) : 
                                    (importStatus == 'over' || importStatus == 'error' ) ? this.getResultInfo() : this.getImportProcessInfo() )
                            }
                        </WeaNewScroll>
                    </Spin>
                </WeaDialog>
                {logDialog.visible && <ImportLog ecId={`${this && this.props && this.props.ecId || ''}_ImportLog@zr127f`} />}
            </div>
        )
    }
}