import {
	toJS
} from 'mobx';
import {
	observer,
} from 'mobx-react';
import {
	WeaLocaleProvider,
} from 'ecCom';
import {
	Table,
	Spin,
} from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ImportFail extends React.Component {
	constructor(props){
		super(props);

		this.errorColumns = [{
			title: getLabel(15486, '序号'),
			width: "20%",
			dataIndex: "num",
			className: 'center',
		}, {
			title: getLabel(512685, '信息'),
			width: "80%",
			dataIndex: "msg",
		}];
	}

	render() {
		const {
			store
		} = this.props, {
			errorDatas,
			isProcessing
		} = store;

		return (
			<div>
				{
					isProcessing ? (
						<div className='summary'>
							<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@8igi77`} />
							<span className='tip'>{getLabel(512421,'正在发送消息，请等待......')}</span>
						</div>
					) : (
						<div className="error">
							<i className="icon-coms-Clear cross"/>
							<span className='tip'>{getLabel(512426,"发送失败")}</span>
						</div>
					)
				}
				<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@9j64pc`} 
					columns={this.errorColumns} 
					dataSource={toJS(errorDatas)} 
					pagination={false}
					scroll={{y: 500}}
					bordered
				/>
			</div>
		);
	}
}