<template>
	<view class="middle-popup-wrapper" @click="closePopup">
		<view class="middle-popup-content" @click.stop="">
			<slot></slot>

			<slot name="close">
				<Icons class="close" type="close" :size="30" color="#eee" @click="closePopup" />
			</slot>
		</view>
	</view>
</template>

<script setup lang="ts">
import Icons from "../icons/index.vue";

const emits = defineEmits(["close"]);

function closePopup() {
	emits("close");
}
</script>

<script lang="ts">
export default {
	name: "MiddlePopup"
};
</script>

<style lang="scss" scoped>
.middle-popup-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;

	// 弹窗 z-index: 500 起, 不能设置成 1000 Toast 无法显示
	z-index: 500;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: rgb(0 0 0 / 30%);
}
.middle-popup-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.close {
	position: absolute;
	bottom: 0;
	left: 50%;

	// width: 30rpx;
	// height: 30rpx;
	// font-size: 30rpx;
	color: #ffffff;
	transform: translate(-50%, 200%);
}
</style>
