import {
    inject,
    observer
} from 'mobx-react';
import {
    toJS
} from 'mobx';
import {
    WeaDialog,
    WeaNewScroll,
} from 'ecCom'
import {
    Icon,
    Spin,
    Table,
} from 'antd'
import {
    i18n
} from '../../public/i18n';
import {
    IEVersion
} from '../../public/pulic-func'
import '../../style/import.css'

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

    getErrorInfo = () => {
        const {
            hrmSalaryIndexMaintenance
        } = this.props, {
            resultDialog
        } = hrmSalaryIndexMaintenance, {
            datas,
        } = resultDialog;

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


        const errorInfoTable = <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@sgtcqo`} dataSource={toJS(datas)} columns={columns} pagination={false} scroll={{y:300}} bordered/>

        return <div className='hrm-import-ant-table hrm-import-table-th'>
                    <div style={{padding: '30px 20px 10px'}} className={this.getClassName()}>{errorInfoTable}</div>
                </div>
    }

    getClassName = () => {
        if (IEVersion() == '-1') {
            return ''
        } else {
            return 'hrm-salary-table-edit hrm-salary-table-edit-ie'
        }
    }

    render() {
        const {
            hrmSalaryIndexMaintenance
        } = this.props, {
            resultDialog,
            setResultInfoDialogVisible,
        } = hrmSalaryIndexMaintenance, {
            title,
            visible,
            loading,
            datas,
        } = resultDialog, {
            width,
            height
        } = this.state;


        const icon = <div style={{backgroundColor: '#54D3A2',marginLeft: 330}} className='hrm-import-error-tip'>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@61ntgc`} type='check' style={{ color: '#fff',fontSize: 18 }} />
                      </div>;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hfezq3`}
                    title={title}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    onCancel={() => setResultInfoDialogVisible(false)}
                    buttons={[]}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({height: h})}
                >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@3bxar3`} spinning={loading}> 
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@eznh8a`} height={height + 10}>
                            { (!loading && toJS(datas).length == 0) ? <div style={{marginTop: 150}}>{icon}<span style={{fontSize: 15}}>{`${i18n.button.import()}${i18n.label.success()}`}</span></div> : !loading && this.getErrorInfo()}
                        </WeaNewScroll>
                    </Spin>
                </WeaDialog>
            </div>
        )
    }
}