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: ""
    };
  }

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

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