<template>
	<div class="w-uploader" :class="{ 'w-uploader-readonly': _readonly }">
		<Upload
			v-bind="_fieldProps"
			:beforeRemove="beforeRemove"
			action="/products"
			@success="onSuccess"
			@error="showError"
			:files="value"
		>
			<template v-slot:tip>
				<slot></slot>
			</template>
		</Upload>
  </div>
</template>
<script setup>
import { inject, useAttrs, defineEmits,onMounted } from 'vue';
import { useFieldBasics } from '../usefieldBasics';
import { Upload, UploadFileStatus, Message } from '@king-design/vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const $Attrs = useAttrs();
const formInfo = inject('formInfo');
const emit = defineEmits(['change']);

const { value, _readonly, _fieldProps, onLinkage } = useFieldBasics(
	$Attrs,
	formInfo,
	route,
	emit
);

const beforeRemove = (file) => {
	value.value = value.value.filter((item) => item.name !== file.name);
}

const onSuccess = (res,xml,file,files) => {
  debugger
	value.value = files;
}

const showError = ( e ) => {
	Message.error(e.message);
}
onMounted(async () => {
	onLinkage();
});
</script>
<style lang="less">
.w-uploader {
  width: 300px;
  .ant-upload-list-item-info {
    padding-right: 60px;
  }
}
</style>
