import React, { useState, useEffect } from 'react'
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
import moment from 'moment'
import FileView from './fileView';
import apiurl from '../../../service/apiurl';
// import './index.less'

const { RangePicker } = DatePicker
const { Dragger } = Upload;
const url = "http://223.75.53.141:9100/gs-tsg"

const FileUpload = ({mode, fileNum=1, value, onChange}) => {
  const [fileList, setFileList] = useState([]) //上传文件列表
  const [loading, setLoading] = useState(false)
  console.log(1111111,fileList);
  

  const fileChange = (info) => {
    if (info.file.status === "done") {
      setLoading(false);
    }
    if (info.file.status === "uploading") {
      setLoading(true);
    }
    if (info.file.status === "error") {
      message.error("文件上传失败")
      setLoading(false);
    }
    setFileList(info.fileList)
  }

  useEffect(() => {
    if (mode != 'save' ) {
       const imgFile = value?.map(o => ({
        name: o.fileName,
        response: {
          data: {
            filePath: o.filePath,
            fileId: o.fileId
          }
        },
       }))
      setFileList(imgFile)
    }
  }, [])

  useEffect(()=>{
    if(onChange && fileList){
      let oldFiles = fileList.map(item => (item.response?.data??item))
      onChange(oldFiles)
    }
  },[fileList])


  return (
    <>
      {
        mode!=='view' && 
        <Dragger
          name='file'
          action={apiurl.file.upload}
          onChange={fileChange}
          onDrop={(info) => { console.log(info.dataTransfer.files); }}
          fileList={fileList}
          disabled={loading}
          maxCount={fileNum}
          // onSuccess={handleSuccess}
        >
          <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
          <p className="ant-upload-hint">
            支持扩展名：.doc .docx .xls .pdf .jpg .png .ppt
          </p>
        </Dragger>
      }
      <FileView fileList={fileList} setFileList={setFileList}/>
    </>
  )
}

export default FileUpload