import React, { Component } from "react";
import "./index.css";
import UserSubmitComponent from "./UserSubmitComponent";
import Upload from "../Upload/read";
import UploadImg from "../Images/upload.png";

class UploadFile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorValue: "",
      filename: "",
      fileList: undefined,
      attachment_clean: true,
    };
  }

  // 获取上传后的文件id数组
  UploadFunc = (fileList) => {
    this.setState({
      filename: fileList.fileName,
      editorValue: fileList.fileContent,
    });
  };

  render() {
    const { pathname } = this.props.location;
    const { filename, editorValue, attachment_clean } = this.state;
    const urlroot = pathname.split("uploadfile/")[1];
    const file_path = !urlroot ? filename : `${urlroot}/${filename}`;

    return (
      <React.Fragment>
        <div className="main">
          <p className="pb15 bor-bottom-greyE font-16 color-grey-3 mb20">
            上传文件
          </p>
          <div className="upload-file-repo">
            <Upload
              className="commentStyle"
              isComplete={attachment_clean}
              load={this.UploadFunc}
              icon={
                <img
                  src={UploadImg}
                  width="58"
                  alt=""
                  style={{ marginBottom: 15 }}
                />
              }
              size={5}
              showNotification={this.props.showNotification}
              {...this.props}
            />
          </div>
          <div>
            <UserSubmitComponent
              {...this.props}
              {...this.state}
              filepath={file_path}
              content={editorValue}
              editor_type={"upload"}
            ></UserSubmitComponent>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default UploadFile;
