import React from 'react';
import {Upload, message} 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';

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});
  };

  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 ? (
          <img src={config.httpServer + url} style={{
            height: json.height,
            width: json.width,
            maxWidth: '60vw', // 解决图片在移动端过宽的bug
          }}/>
        ) : (
          <div style={{height: json.height, width: json.width}}/>
        )}
      </Upload.Dragger>
    );
  }
}