<script setup lang="ts">
import { ElUpload } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { PropType, ref, onMounted } from 'vue'
import { useDesign } from '@/hooks/web/useDesign'
import { PATH_URL } from '@/config/axios/service'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('upload')

const uploadUrl = ref('')

const props = defineProps({
  url: propTypes.string.def(''),
  callback: {
    type: Function as PropType<() => void>,
    default: () => {}
  }
})

const uploadSuccess = () => {
  props?.callback?.()
}
console.log(PATH_URL,'PATH_URL的显示');
onMounted(() => {
  uploadUrl.value = PATH_URL + props.url
})
</script>

<template>
  <ElUpload
    :class="prefixCls"
    :action="uploadUrl"
    multiple
    autoUpload
    withCredentials
    :showFileList="false"
    :on-success="uploadSuccess"
  >
    <slot></slot>
  </ElUpload>
</template>

<style lang="less">
@prefix-upload: ~'@{namespace}-upload';
.@{prefix-upload} {
  display: inline-block;
  margin-left: 12px;
  margin-right: 12px;
}
</style>
