<template>
	<uni-popup
		ref="popupRef"
		:round="false"
		:mask-click="false"
		mode="center"
	>
		<view class="popup-view">
			<view class="popup-content-view" :style="{ 'background': themeStore.theme.popup.bgColor }">
				<slot></slot>
			</view>
			<theme-image class="popup-close-btn" src="@/static/mail/icon-popup-close.png" mode="aspectFit" @click.stop="hide"/>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue'
	import { useThemeStore } from '@/store/useThemeStore.js'
	
	const themeStore = useThemeStore()
	const popupRef = ref(null)
	
	const show = () => {
		popupRef.value.open()
	}
	
	const hide = () => {
		popupRef.value.close()
	}
	
	defineExpose({
		show,
		hide
	})
</script>

<style lang="scss">
	.van-popup {
		background: none;
		overflow-y: visible;
	}
</style>

<style lang="scss" scoped>
	.popup-view {
		position: relative;
	}
	
	.popup-close-btn {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}
	
	.popup-content-view {
		border-radius: 20rpx;
		width: 690rpx;
		max-height: 70vh;
		background-color: #922222;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
	}
</style>