import React, { Component } from "react";
import { Upload, Icon } from "antd";
import { getUploadActionUrl, appendFileSizeToUploadFileAll } from "educoder";

import axios from "axios";
const { Dragger } = Upload;
class Read extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: undefined,
      fileContent: undefined,
      fileName: undefined,
    };
  }

  onAttachmentRemove = (file) => {
    this.setState({
      fileList: undefined,
      fileContent: undefined,
      fileName: undefined,
    });
  };

  handleChange = (info) => {
    let reader = new FileReader();
      reader.readAsText(info.fileList[0].originFileObj, "UTF-8");
      reader.onload = (e) => {
        this.state.fileContent = e.target.result;
        this.props.load && this.props.load(this.state);
      };
  };


  beforeUpload = (file) => {
    const forbidden_type = [
      "jpg",
      "jpeg",
      "png",
      "ico",
      "bmp",
      "gif",
      "pdf",
      "csv",
      "xlsx",
      "xls",
      "tif",
      "svg",
      "psd",
      "cdr",
      "webp",
    ];
    const { fileList } = this.state;
    const { size } = this.props;
    const isLt100M = file.size / 1024 / 1024 < size;
    const file_type = file.type.split("/").slice(-1)[0];
    if (fileList && fileList.length > 0) {
      this.props.showNotification("文件已存在, 请删除后再上传");
    } else if (!isLt100M) {
      this.props.showNotification(`文件大小必须小于${size}MB!`);
    } else if (file_type && forbidden_type.indexOf(file_type) !== -1) {
      this.props.showNotification(`不支持${file_type}类型`);
    } else {
      this.setState({
        fileList: [file],
        fileName: file.name,
      })
    }
    return false;
  };

  render() {
    //判断是否已经提交，如已提交评论则上一条评论数据清除
    const { icon, size } = this.props;
    const { fileList, fileName } = this.state;
    const upload = {
      name: "file",
      fileList: fileList,
      onChange: this.handleChange,
      onRemove: this.onAttachmentRemove,
      beforeUpload: this.beforeUpload
        };

    return (
      <Dragger {...upload} className={this.props.className}>
        {fileName ? (
          <p className="ant-upload-text">{fileName}</p>
        ) : (
          <div>
            {icon || <Icon type="inbox" />}
            <p className="ant-upload-text">
              拖动文件或<span className="color-blue">点击此处上传</span>
            </p>
            <p className="mt10">
              暂仅支持文件格式，不支持图片,excel等不可以txt读取的文件
            </p>
            <p className="mt10">
              文件名请使用英文且不得超过{size}MB
            </p>
          </div>
        )}
      </Dragger>
    );
  }
}
export default Read;
