<template>
	<view v-show="show" class="bottom-popup-wrapper" @click="closePopup">
		<view class="popup-body animation-transform-down-to-up" @click.stop="">
			<slot name="default"></slot>
			<slot name="close">
				<Icons class="close" type="closeempty" @click="closePopup" />
			</slot>
		</view>
	</view>
</template>

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

defineProps({
	show: {
		type: Boolean,
		default: false
	}
});

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

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

<style lang="scss" scoped>
@keyframes kf-transform-down-to-up {
	0% {
		transform: translateY(130%);
	}
	100% {
		transform: translateY(0);
	}
}
.animation-transform-down-to-up {
	animation-name: kf-transform-down-to-up;
	animation-duration: 0.4s;
	animation-timing-function: linear;
}
.bottom-popup-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	width: 100vw;
	height: 100vh;
	background: rgb(0 0 0 / 30%);
	.popup-body {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fafafa;

		// height: 300rpx;
		border-radius: 44rpx 44rpx 0 0;
		.close {
			position: absolute;
			top: 34rpx;
			right: 40rpx;
			display: inline-block;
		}
	}
}
</style>
