<template>
	<view v-if="visible" class="popup-overlay" :class="{ 'popup-overlay-enter': showAnimation }">
		<view class="popup-fixed" :class="{ 'popup-scale-enter': showAnimation }">
			<image src="/static/PopupPrintov.png" class="popup-bg-image" mode="aspectFill"></image>
			<image src="/static/icon_printing.gif" class="icon_success" />
			<text class="print_text">{{ printText }}</text>
		</view>
	</view>
</template>
<script setup lang="uts">
	type PopupUploadProps = {
		visible : boolean
		closeOnOverlay : boolean
		printText : string
	}

	type PopupUploadEmits = {
		(e : 'close') : void
	}

	const props = withDefaults(defineProps<PopupUploadProps>(), {
		visible: false,
		closeOnOverlay: false,
		printText: '打印中...'
	})

	const emit = defineEmits<PopupUploadEmits>()

	const showAnimation = ref(false)

	// 监听弹窗显示状态，控制动画
	watch(() : boolean => props.visible, (newVal : boolean) : void => {
		if (newVal) {
			// 弹窗打开时，延迟一帧触发动画
			nextTick(() => {
				showAnimation.value = true
			})
		} else {
			// 弹窗关闭时，重置动画状态
			showAnimation.value = false
		}
	})

	const handleOverlayClick = () => {
		if (props.closeOnOverlay == true) {
			emit('close')
		}
	}

	const handleClose = () => {
		emit('close')
	}
</script>
<style>
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease;
	}

	.popup-overlay-enter {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popup-fixed {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 440.97rpx;
		height: 417.36rpx;
		transform: scale(0.7);
		transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.popup-scale-enter {
		transform: scale(1);
	}



	.popup-bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}


	.icon_success {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 33rpx;
	}


	.print_text {
		font-weight: bold;
		font-size: 28rpx;
		color: #FD3DA0;
		align-items: center;
		;
	}
</style>