import React, { Component } from "react";
import { Input } from "antd";
import { FormComponentProps } from "antd/lib/form";
import { ClampUpload } from "../CustComponents";
import { UploadType } from "../CustComponents/ClampUpload";
import { IUploadData } from "../CustComponents/ClampUpload/ClampUpload";

import "./index.scss";

type IProps = {
  data?: IUploadData;
  limitCount?: number; //最大上传数量, 超过时将隐藏上传按钮
  id?: string;
  form?: FormComponentProps;
  value?: any;
  options?: any;
  accept?: string;
  style?: object;
  tips?: React.ReactNode;
  onChange?(v: any);
};

type IStates = {
  fileList: any[];
};

export default class InputWarpperUpload extends Component<IProps, IStates> {
  state = {
    fileList: []
  };

  UNSAFE_componentWillMount() {
    this.setFileList(this.props.value);
  }

  setFileList = value => {
    let url = "";
    if (value && typeof value === "string") {
      url = value;
    } else if (value instanceof Array && value.length > 0) {
      url = value[0];
    }
    if (url) {
      const arr = url.split("/");
      const file = {
        uid: Math.random()
          .toString(36)
          .substring(2),
        name: arr[arr.length - 1],
        status: "done",
        url
      };
      this.setState({
        fileList: [file]
      });
    }
  };

  shouldComponentUpdate(nextProps) {
    const preProps = this.props;
    return nextProps.value !== preProps.value;
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const preProps = this.props;
    if (nextProps.value !== preProps.value) {
      this.setFileList(nextProps.value);
    }
  }

  handlePreview = () => {};

  handleUploadSuccess = fileInfo => {
    const { fileList } = this.state;
    fileList.push(fileInfo);
    this.setState({
      fileList
    });
    this.props.onChange(fileInfo.url);
  };
  handleRemoveImg = current => {
    const { fileList } = this.state;
    const files = fileList.filter(file => current.uid !== file.uid);
    this.setState({
      fileList: files
    });
    //清除value值
    this.props.onChange("");
  };
  render() {
    let {
      id,
      value,
      limitCount = 1,
      data = {},
      options = {},
      accept,
      style = {},
      tips
    } = this.props;
    const { fileList } = this.state;
    const tempData = Object.assign(
      {},
      { uploadType: UploadType.PICTURE },
      data
    );
    options = Object.assign(
      {},
      {
        accept: accept || "image/*",
        listType: "picture-card",
        fileList,
        onRemove: this.handleRemoveImg
      },
      options
    );
    const hiddenUploadBtn = limitCount ? fileList.length >= limitCount : false;
    return (
      <div
        className={`input-warpper-upload ${
          hiddenUploadBtn ? "hidden-upload-btn" : ""
        }`}
      >
        <div style={style}>
          <Input type="hidden" name={`${id}`} id={`${id}`} value={value} />
          <ClampUpload
            data={tempData}
            options={options}
            onSuccess={this.handleUploadSuccess}
            needProgress
          />
        </div>
        {tips && tips}
      </div>
    );
  }
}