/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2022-05-25 14:45:47
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2023-03-24 16:11:16
 * @FilePath: /KC-MiddlePlatform/src/components/KCUpload/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// /*
//  * @Author: your name
//  * @Date: 2022-01-18 09:15:26
//  * @LastEditTime: 2022-03-07 15:04:21
//  * @LastEditors: Please set LastEditors
//  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
//  * @FilePath: /KC-MiddlePlatform/src/components/KCUpload/index.tsx
//  */

// import { ProFormUploadButton } from '@ant-design/pro-form';
// import React from 'react';
// import { KCUploadType } from './typings';
// import './style.less';
// import { DownloadOutlined } from '@ant-design/icons';

// const KCUpload: React.FC<KCUploadType> = ({ title, fieldProps, ...restProps }) => {
//   return (
//     <div className="KCUpload">
//       <ProFormUploadButton
//         title={title}
//         fieldProps={{
//           customRequest: (resp) => {
//             const { onSuccess, file } = resp;
//             onSuccess && onSuccess(file);
//           },
//           ...fieldProps,
//         }}
//         icon={<DownloadOutlined />}
//         {...restProps}
//       />


//     </div>
//   );
// };

// export default KCUpload;


/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2023-02-15 16:48:56
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2023-02-23 15:37:20
 * @FilePath: /BudgetManaSystem/src/components/BMSUpload/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */



import React, { useState } from 'react';
import { InboxOutlined } from '@ant-design/icons';
import { Alert, UploadFile, UploadProps } from 'antd';
import { Upload } from 'antd';

import './style.less'

const { Dragger } = Upload;

type KCUploadPropsType = {
  onChange?: () => void;
  downloadTemplateFile?:()=>void; //模板下载回调
  newVer?:boolean; //是否为新版本
} & UploadProps

const KCUpload = (props: KCUploadPropsType) => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const { onChange,downloadTemplateFile} = props;

  const config: UploadProps = {
    action: () => Promise.resolve(''),
    name: 'file',
    multiple: false,
    beforeUpload: (file) => {
      setFileList([...fileList, file]);
      return false;
    },
    //onChange:onChange?onChange:()=>{},
    onChange: (fileInfo) => {
      onChange && onChange(fileInfo);
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };


  const download = ()=>{
    downloadTemplateFile&&downloadTemplateFile()
  }


  return (
    <div className='KCUpload' style={{paddingBottom:16}}>
      <div className='toolBar'>
           <span>文件下载</span>
           <span onClick={()=>download()}>模板下载</span>
      </div>
      <Alert message="注意，导入的数据将会覆盖当前数据" type="warning" style={{height:24,fontSize:12,marginBottom:16}} showIcon closable banner />
      <Dragger {...config} height={140}>
        <p className="ant-upload-drag-icon" style={{marginBottom:5}}>
          <InboxOutlined style={{ fontSize: 50, color: '#3376FE' }} />
        </p>
        <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>

      </Dragger>
    </div>
  )
}

export default KCUpload;
