import React from "react"
import successImg from "./success.svg"
import { Button, Table, Spin } from "antd"
import { WeaTable } from 'ecCom'

export default class ModalStep3 extends React.Component {

    componentWillMount() {
        this.columns = [
            {
                title: "错误信息",
                dataIndex: 'message',
                key: 'message',
            }
        ]
    }

    render() {
        const { importResult } = this.props;
        return (
            <div style={{textAlign: "center", marginTop: "10px", overflow: "hidden", height: "550px", display:"flex", flexFlow: "column" }}>
                <div style={{flex: "1",display: "flex", flexFlow: "column"}}>
                    {
                        importResult.successCount === undefined ? 
                            <div style={{textAlign: "center", marginTop: "20px"}}>
                                <Spin />
                                正在导入请稍后...
                            </div>
                        : <div style={{marginTop: "20px"}}>
                            <img src={successImg} style={{marginBottom: "10px"}} />
                            <div style={{fontSize: "20px", marginBottom: "10px"}}>数据导入完成</div>
                            <div>已导入 <span style={{color: "red"}}> {importResult.successCount} </span> 条数据，失败<span style={{color: "green"}}> {importResult.errorCount} </span>条数据</div>
                        </div>
                    }
                    <div style={{marginTop: "20px", maxHeight: "300px", overflowY: "scroll"}} >
                    {
                        <WeaTable columns={this.columns} dataSource={importResult.errorData} pagination={false}/>
                    }
                    </div>
                </div>
                <div className="footerBtnWrapper" style={{height: "30px"}}>
                    <Button type="primary" style={{float: "right"}} onClick={this.props.onFinish}>完成</Button>
                </div>
            </div>
        )
    }
}