import React, { useMemo } from 'react';

import Icon from '../Icon/index';
import { Upload } from 'antd';

function LargeScreenComponentUpload(props: ILargeScreenComponentUpload) {
  let timer = null;
  const { disabled = false, multiple = false, change, styles,btnText } = props;

  const Dom = useMemo(() => {
    return (
      <div className="zl-large-screen-component-upload" style={{ ...styles }}>
        <Upload
          accept=".png,.jpeg,.gif,.jpg,.mp4,.avi,.webm"
          name="file"
          listType="text"
          showUploadList={false}
          disabled={disabled}
          multiple={multiple}
          onChange={(info) => {
            change?.(info, 'changeUpload');
          }}
          beforeUpload={(info, fileList) => {
            //防抖
            clearTimeout(timer);
            timer = setTimeout(() => {
              change?.({ file: info, fileList: fileList }, 'beforeUpload');
            }, 300);
            return false;
          }}
        >
          <span className="zl-large-screen-component-btn">
            <Icon name="icon-daochu" style={{ marginRight: '8px' }} />
           {btnText}
          </span>
        </Upload>
      </div>
    );
  }, [disabled, multiple, styles,btnText]);

  return Dom;
}
export default LargeScreenComponentUpload;

export interface ILargeScreenComponentUpload {
  disabled?: boolean;
  multiple?: boolean;
  change?: Function;
  styles?: React.CSSProperties;
  btnText?:string
}