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: "green" }}>
                    {" "}{importResult.successCount}{" "}
                  </span>{" "}
                  条数据，失败<span style={{ color: "red" }}>
                    {" "}{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>
    );
  }
}