<template>
	<view>
		<view class="addall guodu" :class="{ unclass: !show }" :style="{ zIndex: showbox ? 220 : -2 }">
			<view class="title">
				请领详情
			</view>
			<view class="contect">
				<view class="contect-ones">
					请领区域：护理单元01
				</view>
			</view>
		</view>

		<view class="mengban" v-if="show" @click="() => emit('back')"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue'

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		font: {
			type: String,
			default: ''
		},
		plsbuy: {
			type: Object,
			// default: () => ({})
		}
	})

	// 暴露给模板的 emit
	const emit = defineEmits(['back'])

	const showbox = ref(false)

	// 监听 show，保留你原来的逻辑：show 为 true 时延迟 50ms 再把 showbox 设为 true，false 时立即关掉
	watch(
		() => props.show,
		(n) => {
			if (n) {
				setTimeout(() => {
					showbox.value = true;
				}, 50)
				
			} else {
				showbox.value = false
			}
		}
	)

	// mounted 中打印 plsbuy（你要的行为）
	onMounted(() => {
		
	})
</script>

<style scoped lang="less">
	.addall {
		width: 55vw;
		height: 50vw;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
		border-radius: 1.6vw;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding: 1.5vw 2.2vw;
		z-index: 9120;
	}

	.unclass {
		opacity: 0 !important;
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: RGBA(239, 240, 244, 0.55);
	}
	.title{
		height: 6vh;
		width: 100%;
		// background-color: red;
		font-size: 38rpx;
		font-weight: 600;
		border-bottom: 2rpx solid #E5E5E5;
	}
	.contect{
		margin: 4vh 0;
		.contect-ones{
			color: #888888;
			width: 33%;
			font-size: 30rpx;
		}
	}
</style>