/*
 * Author: 黎永顺
 * name: 导入-步骤一
 * Description:
 * Date: 2023/8/11
 */
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import { Icon, message, Upload } from "antd";

const Dragger = Upload.Dragger;
const { getLabel } = WeaLocaleProvider;

class ImpStep1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: []
    };
  }

  handleChange = (data) => {
    const { fileList, file } = data;
    if (file.response && typeof (file.response) != "undefined" && file.status !== "removed") message.success(getLabel(111, "上传成功"));
    this.setState({ fileList: fileList.slice(-1) });
  };

  render() {
    const { fileList } = this.state;
    const dragger = {
      accept: ".xlsx",
      name: "file",
      multiple: false,
      action: "/api/doc/upload/uploadFile",
      fileList,
      onChange: this.handleChange,
      ...this.props.customDragger
    };
    return (
      <div className="weapp-batch-impsteps-picker-content-imp-step1">
        {/* 导入选项 */}
        {
          this.props.importParams &&
          <div className="weapp-salary-tb-border-bottom import-option">
            <div>{getLabel(543201, "导入选项")}</div>
            {this.props.importParams}
          </div>
        }
        {_.isEmpty(this.props.customDragger) && <div className="title">{getLabel(543202, "导入Excel")}</div>}
        <p className="draggerUploadWrapper">
          <Dragger {...dragger}>
            <div>
              <p className="iconUpload"><Icon type="inbox"/></p>
              <p className="uplaod-title">{getLabel(543203, "点击或将文件拖拽到此区域上传")}</p>
              <p
                className="uplaod-subTitle">{getLabel(543204, "支持单个或批量上传，严禁上传公司内部资料及其他违禁文件")}</p>
            </div>
          </Dragger>
        </p>
        {
          (_.isNil(this.props.customDragger) || this.props.customDragger.showOperateDesc) &&
          <React.Fragment>
            <div className="bottom-border">
              <div>{getLabel(27577, "操作步骤")}</div>
              <p>
                <span>{`1. ${getLabel(30907, "第一步")},${getLabel(543205, "请选择导出的Excel文件或")}`}</span>&nbsp;&nbsp;
                {
                  typeof this.props.link === "string" ?
                    <a href={this.props.link} className="weapp-salary-link"
                       target="_blank">{getLabel(543207, "点击这里下载模板")}</a> :
                    <a className="weapp-salary-link"
                       onClick={this.props.link}
                    >{getLabel(543207, "点击这里下载模板")}</a>
                }
                &nbsp;&nbsp;
                {this.props.exportDataDom}
              </p>
              <p>{`2. ${getLabel(543211, "第二步")},${getLabel(543212, "请一定要确定Excel文档中的格式是模板中的格式")},${getLabel(543213, "没有被修改掉")}；`}</p>
              <p>{`3. ${getLabel(543216, "第三步")},${getLabel(543215, "选择填写好的Excel文档")},${getLabel(543214, "点击“下一步”按钮进行数据预览")}；`}</p>
              <p>
                {`4. ${getLabel(543217, "第四步")},${getLabel(543218, "如果以上步骤和Excel文档正确的话")},${getLabel(543219, "导入成功会有提示")},${getLabel(543220, "数据会被正确导入")}。${getLabel(543221, "如果有问题")},${getLabel(543222, "则会提示Excel文档的错误之处")}。`}
              </p>
            </div>

            <div className="description">
              <div>{getLabel(543223, "Excel文件说明")}</div>
              <p>{`1. ${getLabel(543224, "后缀名为xls或者xlsx")};`}</p>
              <p>{`2. ${getLabel(543225, "数据请勿放在合并的单元格中")};`}</p>
              <p><span>{`3. ${getLabel(543226, "账单月份格式必须为")}:YYYY-MM；`}</span></p>
            </div>
          </React.Fragment>
        }
      </div>
    );
  }
}

export default ImpStep1;
