<script lang="ts" setup>
import { ref } from 'vue'
import { InboxOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import type { UploadChangeParam } from 'ant-design-vue'

const fileList_left = ref([])

function handleChange_left(info: UploadChangeParam) {
  const status = info.file.status
  if (status !== 'uploading')
    console.log(info.file, info.fileList)

  if (status === 'done') {
    info.fileList.find(item => item.url)
    message.success(`${info.file.name} file uploaded successfully.`)
  }
  else if (status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  }
}

function handleDrop_left(e: DragEvent) {
  console.log(e)
}

const fileList = ref([])

function 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>

<template>
  <a-row>
    <a-col :span="12">
      <div class="split_style">
        拆分前文件
      </div>
      <div class="style_left">
        <a-upload-dragger
          v-model:fileList="fileList_left"
          name="file"
          :multiple="true"
          action="http://localhost:85/dev-api/infra/file/upload"
          @change="handleChange_left"
          @drop="handleDrop_left"
        >
          <!--          :headers="{ Authorization: 'Bearer 4386f0392a6642cead5f419db84bd83b' }" -->
          <p class="ant-upload-drag-icon">
            <inbox-outlined />
          </p>
          <p class="ant-upload-text">
            单击或拖动文件到此区域进行上传
          </p>
          <p>
            一次只支持上传一个文件
          </p>
          <!--          <p class="ant-upload-hint"> -->
          <!--            Support for a single or bulk upload. Strictly prohibit from uploading company data or -->
          <!--            other -->
          <!--            band files -->
          <!--          </p> -->
        </a-upload-dragger>
      </div>
    </a-col>
    <a-col :span="12">
      <div class="split_style">
        拆分后文件
      </div>
      <div class="style_right">
        <a-upload-dragger
          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 />
          </p>
          <p class="ant-upload-text">
            拆分后结果
          </p>
          <!--          <p class="ant-upload-hint"> -->
          <!--            Support for a single or bulk upload. Strictly prohibit from uploading company data or -->
          <!--            other -->
          <!--            band files -->
          <!--          </p> -->
        </a-upload-dragger>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped lang="less">
.split_style {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  //margin-right: 30px;
  font-size: 20px;
  font-weight: bold;
  color: #f06;
}

.style_left {
  width: 100%;
  height: 100%;
}

.style_right {
  width: 100%;
  height: 100%;
}
</style>
