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


class ImageUpload extends React.Component {
    state = {
        loading: false,
        imageUrl: undefined,
    };

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

        if (info.file.status === 'removed') {
            this.props.onChange();
        }

        // if (info.file.status === "done") {
        //   this.setState({
        //     loading: false,
        //   })

        //   if (info.file.response && info.file.response.url) {
        //     this.setState({
        //       imageUrl: info.file.response.thumbUrl,
        //     });

        //     if (typeof this.props.onChange === 'function') {
        //       this.props.onChange(info.file.response.url);
        //     }
        //   }
        // }
    };

    // {(this.state.imageUrl || value) ? (
    //   <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />
    // ) : (
    //     uploadButton
    //   )}

    handleUploadSucess = (url) => {
        this.setState({ loading: false });
        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>
        );

        // width: 150px;
        // height: 241px;
        const boundStyle = {
            width: `${this.props.width || 150}px`,
            height: `${this.props.height || 150}px`,
            marginTop: '10px',
        }
        
        const { value } = this.props;
        return (
            <>
                {!(this.state.imageUrl || value) && <div style={boundStyle}> <Upload
                    listType="picture-card"
                    className="avatar-uploader avatar-newupdate"
                    showUploadList={false}
                    beforeUpload={this.props.beforeUpload}
                    onChange={this.handleChange}
                    {...uploaderProps}
                    disabled={this.props.disabled}
                    onSuccess={this.handleUploadSucess}

                >
                    {uploadButton}
                </Upload>
                </div>
                }
                {(this.state.imageUrl || value) && <div className="uploadbox" style={boundStyle}>
                    <img className="img" src={this.state.imageUrl || value} alt="avatar" style={{ width: '100%' }} ></img>

                    <Upload
                        listType="picture-card"
                        // className={}
                        className="avatar-uploader avatar-update"
                        showUploadList={false}
                        beforeUpload={this.props.beforeUpload}
                        onChange={this.handleChange}
                        {...uploaderProps}
                        disabled={this.props.disabled}
                        onSuccess={this.handleUploadSucess}
                    >
                        更换
                </Upload>
                </div>}

            </>
        );
    }
}

export default ImageUpload;
