<template>
  <el-upload
    class="upload"
    action="/prod-api/system/upload"
    :headers="uploadHeader"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :disabled="props.disabled"
  >
    <slot></slot>
  </el-upload>
</template>

<script setup>
import { getToken } from "@/utils/auth"

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['success', 'before-upload', 'error'])

const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});

const beforeUpload = (rawFile) => {
  console.log(rawFile)
  emit('before-upload')
  return true
}

const onSuccess = (response, uploadFile, uploadFiles) => {
  const { extension, name, originalName, refField, refType, size, url  } = response.data
  const file = {
    extension,
    name,
    originalName,
    refField,
    refType,
    size,
    url
  }
  emit('success', file)
}

const onError = (error, uploadFile, uploadFiles) => {
  console.log(error, uploadFile, uploadFiles)
  emit('error')
}
</script>

<style lang="scss" scoped>
.upload {
  display: inline-block;
  ::v-deep(.el-upload-list) {
    display: none;
  }
}

</style>