import React from "react";
import { Icon, message, Modal, Upload } 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} alt=""/>
          </div>
        </Modal>
      </div>
    );
  }
}