import React from 'react';
import Wrap from '../wrap/Wrap';

import { Upload } from 'antd';

import '../g.scss';
import Icon from 'src/components/Icon/index';
const { Dragger } = Upload;

const LabelUpload = (props: IProps) => {
  let timer = null;
  const {
    value,
    title = '',
    change,
    wrapStyle = { padding: '6px 20px 6px 20px' },
    icon
  } = props;

  const uploadProps = {
    maxCount: 1,
    // accept: '.json',
    name: 'file',
    listType: 'text',
    showUploadList: false,
    onChange(info) {
      change?.(info, 'changeUpload');
    },
    beforeUpload(info, fileList) {
      //防抖
      clearTimeout(timer);
      timer = setTimeout(() => {
        change?.({ file: info, fileList: fileList }, 'beforeUpload');
      }, 300);
      return false;
    },
    onDrop(e) {
      e.stopPropagation();
    }
  };

  return (
    <Wrap wrapStyle={wrapStyle}>
      <div className="zl-ls-large-upload">
        <span className="zl-ls-large-upload-name">
          {
            value&&<>
            <div className="zl-ls-large-upload-spans">
              <Icon name="icon-wenjian" style={{ marginRight: '8px' }} />
              <span className="zl-ls-large-upload-span" title={value}>
                {value}
              </span>
              </div>
              <span
                className="zl-ls-large-upload-del"
                onClick={() => {
                  change?.(name, 'uploadDel');
                }}
              >
                删除
              </span>
            </>
          }
          
        </span>

        <Dragger {...uploadProps}>
          <div className="zl-ls-large-upload-wrap">
            {icon ? <Icon name={icon} /> : <></>}
            <span>{title}</span>
          </div>
        </Dragger>
      </div>
    </Wrap>
  );
};
export default LabelUpload;

export interface IProps {
  title: string;
  change: Function;
  wrapStyle?: React.CSSProperties;
  value: string;
  icon?: string;
}