<template>
	<view v-if="visible" class="popup-overlay" :class="{ 'popup-overlay-enter': showAnimation }">
		<view class="popup-overlay__content" :class="{ 'popup-scale-enter': showAnimation }"
			@click="handleContentClick">
			<view class="popup-container">
				<!-- 背景图片 -->
				<image src="/static/popup.png" class="popup-bg-image" mode="aspectFit"></image>

				<!-- 弹窗内容 -->
				<view class="popup-content">
					<view class="popup-title">
						<text class="title-text">请选择</text>
						<text class="title-text">上传的方式</text>
					</view>
					<view class="btn-group">
						<button class="Upload-btn" hover-class="hover_btn" @click="handleUpload">手机上传</button>
						<button class="Qrcode-btn" hover-class="hover_btn" @click="handleTakePhoto">设备拍照</button>
					</view>
				</view>
			</view>
			<!-- 关闭按钮 -->
			<view class="close-button" @click="handleClose">
				<image src="/static/icon_close.png" class="close-icon"></image>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
	// 定义组件属性接口
	interface PopupCheckProps {
		visible : boolean
		closeOnOverlay ?: boolean
	}

	// 定义组件事件接口
	interface Emits {
		(e : 'close') : void
		(e : 'upload') : void
		(e : 'takePhoto') : void
	}

	// 定义属性默认值
	const props = withDefaults(defineProps<PopupCheckProps>(), {
		visible: false
	})

	const emit = defineEmits<Emits>()

	const showAnimation = ref(false)

	// 组件挂载时的处理
	onMounted(() => {
		// 组件挂载完成
	})

	// 组件卸载时的处理
	onUnmounted(() => {
		// 组件卸载完成
	})

	// 监听弹窗显示状态，控制动画
	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 handleContentClick = () => {
		// 阻止事件冒泡，防止关闭弹窗
	}

	// 处理关闭按钮点击
	const handleClose = () => {
		emit('close')
	}

	// 处理上传按钮点击
	const handleUpload = () => {
		emit('upload')
	}

	// 处理拍照按钮点击
	const handleTakePhoto = () => {
		emit('takePhoto')
	}
</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-overlay__content {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		transform: scale(0.7);
		transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

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


	/* 弹窗容器 */
	.popup-container {
		width: 498.61rpx;
		height: 547.92rpx;
		position: relative;
	}

	/* 弹窗背景图片 */
	.popup-bg-image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	/* 弹窗内容 */
	.popup-content {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 100%;
	}

	/* 弹窗标题 */
	.popup-title {
		margin: 132.17rpx 0 55.56rpx 55.56rpx;
	}

	/* 弹窗标题文字样式：文字样式必须设置在 <text> 上 */

	/* 按钮组容器 */
	.btn-group {
		display: flex;
		justify-content: flex-start;
		margin: 0rpx 0 0 55rpx;
		flex-direction: column;
	}

	/* 上传按钮 */
	.Upload-btn {
		width: 194rpx;
		height: 67rpx;
		background: linear-gradient(to bottom, #FD3C9F, #FCA7D3);
		font-weight: bold;
		font-size: 25rpx;
		color: #000000;
		line-height: 67rpx;
		border-radius: 20rpx;
		border: none;
		margin-bottom: 16rpx;
	}

	/* 拍照按钮 */
	.Qrcode-btn {
		width: 194rpx;
		height: 67rpx;
		background: #fff5fa;
		font-weight: bold;
		font-size: 25rpx;
		color: #000000;
		line-height: 67rpx;
		border-radius: 20rpx;
		border: none;
	}

	/* 关闭按钮 */
	.close-button {
		margin-top: 21rpx;
		width: 48rpx;
		height: 48rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
		border-radius: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 关闭图标 */
	.close-icon {
		width: 48rpx;
		height: 48rpx;
	}

	/* 弹窗标题文字样式 */
	.title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #21061A;
		line-height: 1.2em;
	}
</style>