import React, { Component } from 'react';
import { Upload } from '@easyv/antd';
import message from 'components/message';
import styles from './index.less';
const { Dragger } = Upload;

interface IProps {
  multiple?: boolean;
  accept: string[];
  containerStyles?: React.CSSProperties;
  draggerContainerStyles?: React.CSSProperties;
  onComplete: (File) => void;
}

// const FileSelect = (props: IProps) => {
//   const beforeUpload = (file) => {
//     const { accept, onComplete } = props;
//     if (accept && accept.length) {
//       const ext = file.name.slice(file.name.lastIndexOf('.'));
//       if (!accept.includes(ext.toLowerCase())) {
//         blackMessage.error(`${file.name}文件格式不正确，请重新选择`);
//         return false;
//       }
//     }
//     onComplete && onComplete(file);
//     return false;
//   };
// };

class FileSelect extends Component<IProps> {
  beforeUpload = (file) => {
    const { accept, onComplete } = this.props;
    if (accept && accept.length) {
      const ext = file.name.slice(file.name.lastIndexOf('.'));
      if (!accept.includes(ext.toLowerCase())) {
        message.error(`${file.name}文件格式不正确，请重新选择`);
        return false;
      }
    }
    onComplete(file);
    return false;
  };

  render() {
    const { multiple = true, containerStyles, draggerContainerStyles, accept = [] } = this.props;
    return (
      <div className={styles.container}>
        <Dragger accept={accept.join(',')} multiple={multiple} showUploadList={false} beforeUpload={this.beforeUpload}>
          <div className={styles.draggerContainer} style={{ ...draggerContainerStyles }}>
            <i className={styles.uploadIcon} />
            <p>单击或拖放文件至此处进行上传</p>
          </div>
        </Dragger>
      </div>
    );
  }
}

export default FileSelect;
