<template>
	<div>
		<el-upload
			class="avatar-uploader"
			:action="state.path"
			:show-file-list="false"
			:on-success="handleSuccess"
			:before-upload="beforeUpload"
		>
			<img v-if="state.imageUrl" :src="state.imageUrl" class="avatar" />

			<el-icon v-else class="avatar-uploader-icon">
				<Plus />
			</el-icon>
		</el-upload>

	</div>
</template>
<script setup lang="ts">
const props = defineProps({
	imageUrl: {
		type: String,
		default: '',
	},
})

// 创建 emit 事件
import { UploadProps } from 'element-plus'
const emit = defineEmits();
const  state = reactive({
	imageUrl: '',
	path:import.meta.env.VITE_API_FRONT_BASE_URL+"/api/upload"
})
// 监控 props.imageUrl 的变化
watch(
	() => props.imageUrl, // 监听 imageUrl 的变化
	(newVal, oldVal) => {
		// console.log('imageUrl changed from', oldVal, 'to', newVal)
		// 这里可以执行相应的操作，比如清空本地 state.imageUrl 或更新界面
		state.imageUrl = newVal // 更新本地的 imageUrl
	}
)
onMounted(()=>{
	if (props.imageUrl){
		state.imageUrl = props.imageUrl
	}
})

// 上传前的钩子，返回 false 可以阻止上传
function beforeUpload(file) {
	const isImage = file.type.startsWith('image/')
	if (!isImage) {
		ElMessage.error('只能上传图片文件!')
	}
	return isImage
}

// 上传成功后的回调
const handleSuccess: UploadProps['onSuccess'] = (
	response,
	uploadFile
) => {
	state.imageUrl =  response.data.path
	ElMessage.success('上传成功')
	console.log("fanhui1",response)
	console.log("fanhui2",response.data.path)
	// 通过 emit 将路径传递给父组件
	emit('update:imageUrl', response.data.path);
}
</script>

<style scoped>
:deep(.el-upload ){
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}
.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
.avatar{
	width: 178px;
	height: 178px;
}
</style>
