import React from 'react';
import { Upload, message, Badge, Icon, Modal } 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';
import { getSysCode } from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';

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

	getImageWidthAndHeight = (file) => { // 解决禅道任务 2006 评奖评优管理头像上传限制优化
	  return new Promise((resolve, reject) => {
      let _URL = window.URL || window.webkitURL;
      let image = new Image();
      image.src = _URL.createObjectURL(file);
      image.onload = function () {
        resolve({
          width: image.width,
          height: image.height,
        });
      };
    });
  }

  giveMessage = () => {
	  const { otherProps = {} } = this.props;
	  Modal.warning({
      title: '图片限制',
      content: otherProps.limitMessage || '图片格式错误!',
      okText: '确定',
    });
  }



	render() {
		const { json, disabled, otherProps } = this.props;
		const { url } = this.state;
		return (
			<Upload.Dragger
				disabled={disabled}
				accept={otherProps.accept || 'image/*'}
				url={url}
				headers={{
					Authorization: `bearer ${getToken()}`,
          sysCode: getSysCode(),
        }}
				data={{
					token: getToken(),
				}}
				beforeUpload={(file) => {
				  if(otherProps){
				    if(otherProps.limitFileType && Array.isArray(otherProps.limitFileType)){ // 限制文件类型
				      let fileType = file.name.split('.').pop();
				      if(!otherProps.limitFileType.includes(fileType)){
				        this.giveMessage();
				        return false;
              }
            }
				    if(otherProps.limitWidth || otherProps.limitHeight){ //限制上传图片的宽高. 解决禅道任务 2006
              return new Promise((resolve, reject) => {
                this.getImageWidthAndHeight(file).then((res) => {
                  if(otherProps.limitWidth && res.width !== otherProps.limitWidth){
                    this.giveMessage();
                    reject(false);
                    return false;
                  }
                  if(otherProps.limitHeight && res.height !== otherProps.limitHeight){
                    this.giveMessage();
                    reject(false);
                    return false;
                  }
                  return resolve(zipImage(file, 4));
                });
              });
            }
          }


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