import React from 'react';
import { Button, Icon, message, Modal, Upload } from 'antd';
import { queryApiActionPath } from '../utils/queryConfig';
import config from '@/webPublic/one_stop_public/config';
import styles from './style.less';
import UploadComDiyForQnZy from '@/webPublic/one_stop_public/libs/UploadComDiyForQnZy';

export function checkIsImage(path) {
  if (!path) {
    return false;
  }
  let p = path.toLowerCase();
  let find = ['.jpg', '.png', '.jpeg', '.bmp', '.gif', '.bmp', '.svg'].find(x => {
    return path.indexOf(x) > -1;
  });
  return !!find;
}

export default function index(props) {
  if (window.location.href.indexOf('jy/geren/subsidy') > -1) {
    return <UploadComDiyForQnZy {...props} />;
  } else {
    return <UploadCom {...props} />;
  }
}

class UploadCom extends React.Component {
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      files: value.files,
      previewVisible: false,
      previewImage: '',
    };
    this.otherProps = {};
    console.log(props);
    if (props.json?.otherProps) {
      this.otherProps = props.json?.otherProps;
      try {
        this.otherProps = new Function(this.otherProps)();
        console.log(this.otherProps);
      } catch (e) {}
    }
  }

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

  //图片上传之前进行判断
  beforeUpload = file => {
    return this.isSize(file).then(res => {
      message.info('正在上传中,请等待');
      return true;
    });
  };

  //检测尺寸
  isSize = file => {
    const { limitWarnningMessage } = this.otherProps;
    return new Promise((resolve, reject) => {
      let { width, height } = this.otherProps.limitImageSize;
      let _URL = window.URL || window.webkitURL;
      let img = new Image();
      img.onload = function() {
        let valid = img.width >= width && img.height >= height;
        valid ? resolve() : reject();
      };
      img.src = _URL.createObjectURL(file);
    }).then(
      () => {
        return file;
      },
      () => {
        message.error(
          file.name + limitWarnningMessage,
        );
        return Promise.reject();
      },
    );
  };

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

  changeUrl = info => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
      const files = this.state.files;
      files.push({ path: info.file.response, name: info.file.name });
      if (!('value' in this.props)) {
        this.setState({ files });
      }
      this.triggerChange({ files });
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  };
  remove = path => {
    const files = this.state.files;
    for (var i = 0; i < files.length; i++) {
      if (files[i].path == path) {
        files.splice(i, 1);
        break;
      }
    }
    if (!('value' in this.props)) {
      this.setState({ files });
    }
    this.triggerChange({ files });
  };

  render() {
    const { files, previewVisible, previewImage } = this.state;
    const { isMultiple, accept, btnName, disabled } = this.props;
    const props = {
      name: 'file',
      multiple: isMultiple,
      accept: accept,
      action: config.uploadUrl,
      showUploadList: false,
      onChange: this.changeUrl,
      beforeUpload: this.otherProps?.limitImageSize ? this.beforeUpload : undefined,

    };
    return (
      <div>
        {' '}
        <Upload {...props} disabled={disabled}>
          {!disabled && (
            <Button>
              <Icon type="upload" />
              {btnName ? btnName : '上传附件'}
            </Button>
          )}
        </Upload>
        <ul style={{ paddingLeft: 8, display: 'flex' }}>
          {(files || []).map(f => {
            if (f.path && checkIsImage(f.path)) {
              return (
                <li key={f.path} className={styles.preview_img}>
                  <div className={styles.preview_div}>
                    <img
                      style={{ width: '100px', height: 'auto' }}
                      className={styles.img}
                      src={queryApiActionPath() + f.path}
                    />
                    <div
                      className={styles.mask}
                      onClick={() => {
                        // window.open(queryApiActionPath() + f.path);
                        this.setState({
                          previewVisible: true,
                          previewImage: queryApiActionPath() + f.path,
                        });
                      }}
                    >
                      <Icon type="eye" className={styles.icon_eye} />
                    </div>
                  </div>
                  {!disabled && (
                    <Icon
                      style={{ marginLeft: 10 }}
                      type="delete"
                      onClick={this.remove.bind(this, f.path)}
                    />
                  )}
                </li>
              );
            }
            return (
              <li key={f.path}>
                <a target="_blank" key={f.path} href={queryApiActionPath() + f.path}>
                  {f.name}
                </a>{' '}
                {!disabled && (
                  <Icon
                    style={{ marginLeft: 10 }}
                    type="delete"
                    onClick={this.remove.bind(this, f.path)}
                  />
                )}
              </li>
            );
          })}
        </ul>
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={() => this.setState({ previewVisible: false })}
          width={'90vw'}
        >
          <img alt="example" style={{ width: '100%', height: 'auto' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}