<template>
  <div class="offlineFile">
    <div class="offlineFile-div">
      <a-upload-dragger
        v-model:fileList="fileList"
        name="file"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        @change="handleChange"
        @drop="handleDrop"
      >
        <div class="uploadDiv">
          <p class="ant-upload-drag-icon">
            <PlusOutlined />
          </p>
          <p class="ant-upload-text">上传文件</p>
          <p class="ant-upload-hint"> 点击或拖拽文件到此处 </p>
        </div>
      </a-upload-dragger>
      <div class="uploadButton">
        <a-button type="primary" size="large">
          <CloudUploadOutlined />
          上传数据
        </a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, onMounted } from 'vue';
  import { PlusOutlined, DeleteOutlined, CloudUploadOutlined } from '@ant-design/icons-vue';

  const fileList = ref([]);
</script>
<style lang="less">
  .offlineFile {
    display: flex;
    justify-content: center;
    height: 700px;
  }
  .offlineFile-div {
    margin-top: 30px;
    width: calc(50%);
    height: 300px;
  }
  .uploadDiv {
    margin-top: 70px;
  }
  .uploadButton {
    position: relative;
    margin-top: 80px;
    display: flex;
    justify-content: center;
  }
</style>
