<template>
  <el-upload
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.6)"
    class="upload"
    accept=".xls, .xlsx"
    :action="props.action"
    :data="props.data"
    :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({
  action: {
    type: String,
    default: '/system/upload',
  },
  data: {
    type: Object,
    default: () => {},
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['success']);

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

const loading = ref(false);

const beforeUpload = rawFile => {
  console.log(rawFile);
  if(rawFile.name.length > 50) {
    proxy.$modal.msgError(`文件名称过长(50个字符以内)，请先修改再上传!`);
    return false
  }
  loading.value = true;
  return true;
};

const onSuccess = (response, uploadFile, uploadFiles) => {
  loading.value = false;
  const data = response.data;
  emit('success', data);
};

const onError = (error, uploadFile, uploadFiles) => {
  console.log(error, uploadFile, uploadFiles);
  loading.value = false;
};
</script>

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