<template>
  <div class="OfflineFile">
    <a-upload-dragger
      style="margin-bottom: 45px"
      v-model:fileList="fileList"
      name="file"
      :multiple="true"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      @change="handleChange"
      @drop="handleDrop"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击或拖拽文件到此处</p>
    </a-upload-dragger>
    <div class="upload-button">
      <div class="upload-button-title">上传文件</div>
      <div class="upload-button-subtitle">点击或拖拽文件到此处</div>
      <div><a-button type="primary" :icon="h(UploadOutlined)" size="large">上传数据</a-button></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h, } from 'vue';
import { InboxOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';
const fileList = ref([]);
const handleChange = (info: UploadChangeParam) => {
  const status = info.file.status;
  if (status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (status === 'done') {
    message.success(`${info.file.name} file uploaded successfully.`);
  } else if (status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};
function handleDrop(e: DragEvent) {
  console.log(e);
}
</script>

<style lang="scss" scoped>
.OfflineFile{
  padding: 87px 378px;
  .upload-button{
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
    .upload-button-title{
      font-size: 26px;
      color: #000;
      margin-bottom: 8px;
    }
    .upload-button-subtitle{
      font-size: 18px;
      color: #000;
      margin-bottom: 8px;
      opacity: 0.5;
      margin-bottom: 26px;
    }
  }
}
</style>
