import React from "react";
import successImg from "./success.svg";
import { Spin } from "antd";
import { WeaLocaleProvider, WeaTable } from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;
export default class ModalStep3 extends React.Component {
  componentWillMount() {
    this.columns = [
      {
        title: getLabel(25700, "错误信息"),
        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/>
              {`${getLabel(543227, "正在导入请稍后")}...`}
            </div>
            : <div style={{ marginTop: "20px" }}>
              <img src={successImg} style={{ marginBottom: "10px" }} alt=""/>
              <div style={{ fontSize: "20px", marginBottom: "10px" }}>
                {getLabel(543228, "数据导入完成")}
              </div>
              <div>
                {getLabel(389249, "已导入")}
                <span style={{ color: "green" }}>
                    {importResult.successCount}{" "}
                  </span>
                {`${getLabel(30690, "条数据")},${getLabel(25009, "失败")}`}<span style={{ color: "red" }}>
                    {importResult.errorCount}{" "}
                  </span>{getLabel(30690, "条数据")}
              </div>
            </div>}
          <div>
            {
              <WeaTable
                columns={this.columns}
                dataSource={importResult.errorData}
                pagination={false}
                scroll={{ y: `calc(100vh - 387px)` }}
              />
            }
          </div>
        </div>
      </div>
    );
  }
}