<template>
  <div>
    <el-upload
      ref="uploadRef"
      :action="`${upload.url}`"
      :disabled="upload.isUploading"
      drag
      :headers="upload.headers"
      :limit="1"
      :accept="accept"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
    >
      <el-icon class="el-icon--upload">
        <upload-filled />
      </el-icon>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip text-center"></div>
      </template>
    </el-upload>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
const props = defineProps({
  accept: {
    type: String,
    default: 'image/*',
  },
})
const uploadRef = ref(null)
const emit = defineEmits(['onSuccess'])

/** * 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { session: `${useUserStore().token}` },
  // 上传的地址
  url: `/filestransfer/upload`,
})

/** 文件上传中处理 */
function handleFileUploadProgress(event, file, fileList) {
  upload.isUploading = true
}

/** 文件上传成功处理 */
function handleFileSuccess(response, file, fileList) {
  upload.open = false
  upload.isUploading = false
  uploadRef.value.handleRemove(file)
  console.log(response)
  if (response.status === 200) {
    emit('onSuccess', response.result, file)
  }
}
</script>

<style lang="scss" scoped></style>
