import React from 'react'
import { Upload, Icon, Modal } from 'antd';
import "./index.less"

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg' || file.type==="image/png";
    if (!isJPG) {
        message.error('只允许上传jpg、png类型的图片!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片大小限制2MB!');
    }
    return isJPG && isLt2M;
}

  export default class BackgroundUpload extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
        showOperate: false,
        visible: false
        }
    }

    // 上传完成监听
    handleChange = (info) => {
      if (info.file.status === 'done') {
        this.props.onChange && this.props.onChange(info.file.response.data.acclink)
        getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
      }
    }

    // 删除
    handleDelete = () => {
        this.props.onChange && this.props.onChange(null);
    }

    // 预览
    handlePreview = () => {
        this.setState({visible: true})
    }

    render() {
        const props = {
            action: '/api/doc/upload/uploadFile',
            multiple: false,
            listType: "picture-card",
            showUploadList: false,
            onChange: this.handleChange.bind(this)
          };
        const { imageUrl } = this.props;
        return (
            <div className="uploadPictureWrapper">
                {
                (imageUrl || imageUrl == "") ?
                    <div className="previewWrapper" onMouseEnter={() => {this.setState({showOperate: true})}} onMouseLeave={() => {this.setState({showOperate: false})}}>
                        <img src={imageUrl} alt="" className="previewImg"/>
                        {
                            this.state.showOperate && <div className="operateWrapper">
                                <i className="icon-coms-Supervise operateIcon" onClick={() => {this.handlePreview()}}/>
                                <i className="icon-coms-Delete operateIcon" onClick={() => {this.handleDelete()}}/>
                            </div>
                        }
                    </div>
                    :
                    <Upload {...props}>
                        <Icon type="plus" className="avatar-uploader-trigger" />
                    </Upload>
                }
                <Modal visible={this.state.visible} width={600} footer={null} onCancel={() => {this.setState({visible: false})}} >
                    <div style={{width: "100%", textAlign: "center"}}>
                        <img src={imageUrl}/>
                    </div>
                </Modal>
            </div>
        );
      }
  }