import React from 'react';
import { Upload, message, Badge, Icon } from 'antd';
import config from '@/webPublic/one_stop_public/config';
import { zipImage } from '@/webPublic/zyd_public/utils/handlePhoto';
import { getToken } from '@/webPublic/one_stop_public/utils/token';
import { queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig';

export default class ImgUploadCom extends React.Component {
  constructor(props) {
    super(props);
    const value = props.value;
    this.state = {
      url: value,
    };
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };

  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState({ url: value });
    }
  }

  changeUrl = (info, key) => {
    if (info.file.status === 'done') {
      message.success(`图片上传成功`);

      if (!('value' in this.props)) {
        this.setState({ url: info.file.response });
      }
      this.triggerChange(info.file.response);
    } else if (info.file.status === 'error') {
      message.error(`图片上传失败`);
    }
  };
  changePos = (obj) => {
    if (!('value' in this.props)) {
      this.setState({ ...obj });
    }
    this.triggerChange({ ...obj });
  };

  removePicture = (e) => {
    if (e && e.stopPropagation) {
      e.stopPropagation();
      e.preventDefault();
    }
    this.triggerChange('');
  };

  render() {
    const {
      json,
      disabled
    } = this.props;
    const { url } = this.state;
    return (
      <Upload.Dragger
        disabled={disabled}
        accept={'image/*'}
        url={url}
        headers={{
          Authorization: `bearer ${getToken()}`,
        }}
        data={{
          token: getToken(),
        }}
        beforeUpload={(file) => {
          return zipImage(file, 4);
          // 图片压缩函数. 超过fileSizeLimitMb兆的图片 直接压缩成原来的 30%  如果后续有其他需求考虑 做成全局配置项 配置可以压缩的图片的范围
          // 禅道bug 23185
        }}
        showUploadList={false}
        name="file"
        action={config.uploadUrl}
        onChange={this.changeUrl}
        multiple={false}
        style={{ padding: 0 }}>
        {url ? (
          <Badge count={<Icon type="close-circle"
                              style={{ color: 'red' }}
                              onClick={this.removePicture}
          />}>
            <img
              src={queryFileUrl(url)}
              style={{
                height: json.height,
                width: json.width,
                maxWidth: '60vw', // 解决图片在移动端过宽的bug
              }}
            />
          </Badge>
        ) : (
          <div
            style={{
              height: json.height,
              width: json.width,
            }}
          />
        )}
      </Upload.Dragger>
    );
  }
}