<template>
	<!-- 通过 v-show 控制显隐，并根据 show 添加 is-active 类触发 CSS 过渡 -->
	<view :class="['neuro-wrapper', show ? 'is-active' : '']" v-show="show" @touchmove.stop>
		<!-- 遮罩层，点击触发关闭 -->
		<view class="neuro-mask" @click="handleClose"></view>
		<!-- 拟态框，阻止冒泡点击 -->
		<view class="neuro-box" @click.stop>
			<!-- <view class="tittle-bgc">
        
      </view> -->
			<!-- <view class="text">提示</view> -->
			<!-- <view class="button" @click="handleClose">确定</view> -->
			<view style="font-size: 25rpx;line-height: 45rpx;">{{ content }}</view>
		</view>
	</view>
</template>

<script setup>
	// 接收 show 属性并支持 update:show 事件
	const props = defineProps({
		show: {
			type: Boolean,
			default: true
		},
		content: {
			type: String,
			default: ''
		}
	});
	const emit = defineEmits(["close"]);

	// 关闭方法，通知父组件更新 show
	function handleClose() {
		emit('close');
	}
</script>

<style lang="scss" scoped>
	/* 容器默认隐藏，透明度为 0，不接受点击 */
	.neuro-wrapper {
		position: fixed;
		inset: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	/* 显示时透明度过渡到 1，可接受点击 */
	.neuro-wrapper.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* 遮罩层，半透明黑色 */
	.neuro-mask {
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	/* 拟态框 固定尺寸 + 阴影样式 + 相对定位于 wrapper */
	.neuro-box {
		position: relative;
		width: 480rpx;
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('https://www.focusnu.com/media/directive/index/newpink.png');
		// background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;
		z-index: 110;
		padding: 0 10%;
	}

	.tittle-bgc {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background-image: url('https://www.focusnu.com/media/directive/index/modelbgc.png');
		background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;

		.text {
			color: #47526F;
			font-size: 40rpx;
			margin: 40rpx 0 0 50rpx;
			font-weight: 600;
		}
	}

	.button {
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		height: 80rpx;
		background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #9AD1FF;
		color: #007CFF;
		font-size: 35rpx;
		border-radius: 35rpx;
	}
</style>