import React, { useState, useEffect } from 'react';
import { connect } from "umi";
import AliyunOssUploader from '@/components/OssUpload/AliyunOssUploader';

interface IProps {
  label?: string;
  value?: string;
  OSSData?: any;
  onChange?: (value: string) => void;
  beforeUpload?: (file: any) => Boolean;
  onUploading?: (value: string) => void;
}

const UploadField: React.FC<IProps> = props => {
  const { label = '标签', value, onChange, onUploading, OSSData, beforeUpload } = props;

  const uploadProps = {
    OSSData: OSSData,
    onDone: file => {
      let url: string = OSSData.host + '/' + file.url;
      onChange(url);
    },
    onUploading: onUploading,
    beforeUpload: beforeUpload,
    noStyle: false,
    showUploadList: false,
  };

  return (
    <div className="group">
      <label>{label}</label>
      <AliyunOssUploader {...uploadProps} directory={false} label="上传"></AliyunOssUploader>
    </div>
  );
};

export default connect(({ xflow }) => ({
  OSSData: xflow.OSSData,
}))(UploadField);
