import React from 'react';
import { Upload, Icon, message } from 'antd';
import './style.less';
import { uploaderProps } from '../../utils/upload';



class ImageUpload extends React.Component {

  state = {
    loading: false,
    fileList: [],
  };

  handleChange = info => {
    this.setState({ fileList: info.fileList })
    if (info.file.status === "uploading") {
      this.setState({ loading: true });
      return;
    }
  };

  handleUploadSucess = (url) => {
    console.log(url,"33-------")
    if (typeof this.props.onChange === 'function') {
      this.props.onChange(url);
    }
  }

  render() {
    const uploadButton = (
      <div>
        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
      </div>
    );

    return (
      <Upload
        {...uploaderProps}
        listType="picture-card"
        className="avatar-uploader"
        onChange={this.handleChange}
        fileList={this.state.fileList}
        onSuccess={this.handleUploadSucess}
      >
        {this.state.fileList.length >= 1 ? null : uploadButton}  
      </Upload>
    );
  }
}

export default ImageUpload;
