<template>
	<a-upload
		accept=".png,.jpg,.jpeg"
		:max-count="1"
		:show-upload-list="false"
		:action="`${http.prefix}/image/upload-minio`"
		list-type="picture-card"
		@change="handleChanged"
	>
		<a-image v-if="image" width="128" :preview="false" :src="image" alt="avatar" />
		<div v-else>
			<loading-outlined v-if="uploading"></loading-outlined>
			<plus-outlined v-else></plus-outlined>
			<div class="ant-upload-text">{{ description ?? '上传图片' }}</div>
		</div>
	</a-upload>
</template>

<script setup lang="ts">
	import { http } from '@/settings/http'
	import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
	import { UploadChangeParam } from 'ant-design-vue'

	const props = defineProps({
		image: {
			type: String,
			default: () => '',
		},
		description: {
			type: String,
			default: () => undefined,
		},
	})
	const { image, description } = toRefs(props)
	const uploading = ref(false)

	const emit = defineEmits<{
		'update:image': [value: string]
	}>()

	const handleChanged = (info: UploadChangeParam) => {
		const status = info.file.status
		if (status === 'uploading') {
			uploading.value = true
		}
		if (status === 'done') {
			uploading.value = false
			emit('update:image', info.file.response.url)
		} else if (status === 'error') {
			console.log('error')
			uploading.value = false
		}
	}
</script>
