import React, { Component } from 'react';

import moment from 'moment'
import Select, {Option, OptGroup} from 'rc-select';
import 'rc-select/assets/index.css';

import { Upload, Icon, Modal, message } from 'antd';


import 'antd/lib/upload/style/index.css'
import 'antd/lib/modal/style/index.css'
import 'antd/lib/style/index.css'
import 'antd/lib/message/style/index.css'
import './MemoNew.css'
// -------------------------------------------


let uploadValidateFailed = false;
function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  const isPNG = file.type === 'image/png';
  const isGIF = file.type === 'image/gif';
  if (!isJPG && !isPNG && !isGIF) {
    message.error('只能上传图片文件！(jpg、png或gif)');
    uploadValidateFailed = true;
    return false;
  }
  const isLt2M = (file.size / 1024 / 1024) < 2;
  if (!isLt2M) {
    uploadValidateFailed = true;
    message.error('图片大小必须小于 2MB!');
    return false;
  }
  uploadValidateFailed = false;
  return true;
}

class ImageUpload extends Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [
    // {
    //   uid: -1,
    //   name: 'xxx.png',
    //   status: 'done',
    //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    // }
    ],
  };

  handleCancel = () => {

    this.setState({ previewVisible: false })
  }

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleRemove = () => {
    const { onImageUploadRemove } = this.props;
    onImageUploadRemove()
  }

  componentWillReceiveProps(newProps, oldProps) {
    // 初始化值
    if (newProps.fileList && this.props.fileList.length != newProps.fileList.length) {
      this.setState({
        fileList: newProps.fileList
      })
    }
  }

  handleChange = ({ fileList }) => {

    const { onImageUploadDone } = this.props;
    if (fileList.length && fileList[0].status === 'done') {
      onImageUploadDone(fileList[0])
    }
    if (!uploadValidateFailed) {
      this.setState({ fileList })
    }
  }



  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const { currentMemoId } = this.props;
    const uploadButton = (
      <div className="antuploadName">
        <div className="antIconName"><Icon type="plus" /></div>
        <div className="ant-upload-text">点击上传封面</div>
        <div className="ant-upload-text">只支持JPG、PNG、JPEG大小不超过2M</div>
        <div className="ant-upload-text">建议尺寸4:3</div>
      </div>
    );
    
    return (
      <div className="clearfix">
        <Upload
          action={"http://123.59.135.93/upload_memo_heads"}
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
          onRemove={this.handleRemove}
          beforeUpload={beforeUpload}
          data={{
            container_type: 'Memo',
            container_id: currentMemoId ? currentMemoId : ''
          }}
        >
          {fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}

export default ImageUpload;
