<template>
	<div
		class="fullscreen-dialog"
		to="body"
		v-if="hideDestroy ? show || show_ : true"
		v-show="show"
		:class="{ show: show_ }"
		:style="{
			'--transition-time': transitionTime + 'ms'
		}"
	>
		<slot></slot>
		<my-info />
		<div class="close-btn" @click="close">
			<svg-icon name="back-white" color="#fff" size="18" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue'
	import MyInfo from '@/components/MyInfo.vue'
	const props = defineProps({
		modelValue: { default: false, type: Boolean },
		transitionTime: { default: 300, type: Number },
		hideDestroy: { default: false, type: Boolean }
	})
	const emit = defineEmits(['close', 'closed'])
	const show = ref(props.modelValue)
	const show_ = ref(props.modelValue)
	const timeout = ref(null)
	watch(
		() => props.modelValue,
		(v) => {
			if (v) {
				show.value = v
				clearTimeout(timeout.value)
				timeout.value = setTimeout(() => (show_.value = v), 10)
			} else {
				show_.value = v
				clearTimeout(timeout.value)
				timeout.value = setTimeout(() => {
					show.value = v
					emit('closed')
				}, props.transitionTime)
			}
		}
	)
	const close = () => {
		emit('close', false)
	}
</script>

<style lang="less" scoped>
	.fullscreen-dialog {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 1000;
		transition: opacity var(--transition-time);
		opacity: 0;
		&.show {
			opacity: 1;
		}
		> .my-info {
			position: absolute;
			top: 3rem;
			right: 3rem;
			--my-info-bgColor: #fff;
		}
		> .close-btn {
			cursor: pointer;
			position: absolute;
			top: 3.4rem;
			left: 3rem;
			width: 5.1rem;
			height: 5.1rem;
			border-radius: 50%;
			background-color: #ff7a51;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.fullscreen-dialog {
		--size: 0.125rem;
		--width: 2rem;
		--color: #bfbfbf;
		background-color: #fffcf4;
		background-image: repeating-radial-gradient(
			circle at 50% 50%,
			var(--color) 0,
			var(--color) var(--size),
			transparent var(--size),
			transparent var(--width)
		);
		background-position: center center;
		background-size: var(--width) var(--width); /* 设置平铺的大小 */
	}
</style>
