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

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

		this.payrollSendingColumns = [{
				title: getLabel(15486, '序号'),
				width: "15%",
				dataIndex: "rownum",
				className:'center',
			},{
				title: getLabel(512686, '用户'),
				width: "20%",
				dataIndex: "message",
				render: (text, record, index) => {
					return (
						<span>{text}</span>
					)
				}
			}, {
				title: getLabel(602, '状态'),
				width: "65%",
				dataIndex: "status",
				className:'center',
				render: (text, record, index) => {
					return (
						<span style={{ color: text=='1' ? '#54D3A2' : '#FF0000'}}>
							{
								(text=='1') ? getLabel(15242, '成功') : getLabel(498, '失败')
							}
						</span>
					)
				}
			}]
	}

	render() {
		const {
			store
		} = this.props, {
			setScrollRef,
			payrollSendingDatas,
			sendResult,
			isPayrollSendSuccess,
			isProcessing,
		} = store, {
			failnum,
			succnum
		} = sendResult;

		return (
			<div style={{height:'100%'}}>
				{
					isProcessing ? (
						<div className='summary'>
							<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ysa87e`} />
							<span className='tip'>{getLabel(512421,'正在发送消息，请等待......')}</span>
						</div>
					) : (
						<div className='summary'>
							<i className={`${isPayrollSendSuccess ? `icon-coms-Upload-successfully-o check` : `icon-coms-Clear cross`}`}  />
							<span className='tip'>
								{
									isPayrollSendSuccess ?
									 getLabel(512422, '共{rownum}条数据，全部发送成功！').replace('{rownum}',`${succnum+failnum}`) :
									 getLabel(384060, '共{rownum}条数据，{succnum}条导入成功！').replace('{rownum}',`${succnum+failnum}`).replace('{succnum}',`${succnum}`)
								}
							</span>
						</div>
					)
				}
				{
					payrollSendingDatas.length > 0 && (
						<div className="result">
							<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@y2gfeg`} className='scroll' ref={setScrollRef}>
								<Table ecId={`${this && this.props && this.props.ecId || ''}_Table@wpud2m`} 
									columns={this.payrollSendingColumns} 
									dataSource={toJS(payrollSendingDatas)} 
									pagination={false}
									bordered
								/>
							</WeaNewScroll>
						</div>
					)
				}
			</div>
		);
	}
}