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,
      contentEmpty:false
    };
  }

  componentDidUpdate(){
    this.updateDocumentTitle();
  }

  componentDidMount(){
    this.updateDocumentTitle();
  }

  // 更新网页标题
  updateDocumentTitle(){
    const {projectDetail} = this.props;
    if(projectDetail && document.title.indexOf('上传文件-') === -1){
      const { author, name} = projectDetail;
      document.title = `上传文件-${author.name}/${name}`;
    }
  }

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

  checkContent=(flag)=>{
    this.setState({
      contentEmpty:flag
    })
    if(flag){
      window.scrollTo(0,120);
    }
  }

  changeName=(value)=>{
    this.setState({
      filename:value
    })
  }

  render() {
    const { pathname } = this.props.location;
    const { filename, editorValue, attachment_clean , contentEmpty } = this.state;
    const urlroot = pathname.split("uploadfile/")[1];
    const file_path = urlroot ? `/${urlroot}/` :"/";
    return (
      <React.Fragment>
        <div className="main">
          <p className="pb15 bor-bottom-greyE font-16 color-grey-3 mb20">
            上传文件
          </p>
          <div className={contentEmpty ? "upload-file-repo red" :"upload-file-repo"} style={{padding:"0px"}}>
            <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 style={{height:"20px",lineHeight:"5px"}}>{contentEmpty && <p className="color-red">请上传文件</p>}</div>
          <div>
            <UserSubmitComponent
              {...this.props}
              {...this.state}
              filepath={file_path}
              loadName={filename}
              content={editorValue}
              editor_type={"upload"}
              descName={`ADD file via upload`}
              changeName={this.changeName}
              checkContent={this.checkContent}
            ></UserSubmitComponent>
          </div>
        </div>
      </React.Fragment>
    );
  }
}
export default UploadFile;
