import React, { useState } from "react";
import { Upload, Text } from "@tencent/tea-component";

export default function UploadExample() {
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(null);

  function handleStart() {
    setUploading(true);
  }

  function handleSuccess(result, { file }) {
    setFileList(fileList => [
      ...fileList,
      { name: file.name, status: "success" },
    ]);
    setUploading(false);
    console.log(result);
  }

  function handleError(error, { file }) {
    setFileList(fileList => [
      ...fileList,
      { name: file.name, status: "danger" },
    ]);
    setUploading(false);
    console.error(error);
  }

  return (
    <>
      <Upload
        action="https://run.mocky.io/v3/68ed7204-0487-4135-857d-0e4366b2cfad"
        multiple
        onStart={handleStart}
        onSuccess={handleSuccess}
        onError={handleError}
      >
        {({ isDragging, getDraggerProps }) => (
          <div
            {...getDraggerProps({
              style: {
                height: 60,
                border: `1px dashed #ddd`,
                backgroundColor: isDragging ? "#ddd" : undefined,
              },
            })}
          >
            {uploading ? "上传中" : "拖拽到此区域"}
          </div>
        )}
      </Upload>
      {!!fileList.length && <hr />}
      {fileList.map((file, index) => (
        <p key={index}>
          <Text theme={file.status}>{file.name}</Text>
        </p>
      ))}
    </>
  );
}