<template>
	<view>
		<uni-popup
			ref="popupRef"
			type="center"
		>
			<view class="popup-view">
				<view class="popup-content-view" :style="{ 'background': themeStore.theme.popup.bgColor }">
					<view class="ft15 plr30 ptb30" :style="{ 'color': themeStore.theme.text.light }">
						<view>
							{{ $t('deposit.message.tips6') }}
						</view>
						<view>
							{{ $t('deposit.message.tips7') }}
						</view>
					</view>
					<view class="normal-theme-btn-radius" style="width: 300rpx;" :style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal  }" @click.stop="handleConfirmClick">
						{{ $t('deposit.button.confirm') }}
					</view>
				</view>
				<theme-image class="popup-close-btn" src="@/static/mail/icon-popup-close.png" mode="aspectFit" @click.stop="hide"/>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { useThemeStore } from '@/store/useThemeStore.js'
	
	const themeStore = useThemeStore()
	
	const popupRef = ref(null)
	const emit = defineEmits(['close'])
	const pageData = reactive({
		visible: false
	})
	
	const show = () => {
		pageData.visible = true
		popupRef.value.open()
	}
	
	const hide = () => {
		pageData.visible = false
		popupRef.value.close()
		emit('close')
	}
	
	const handleConfirmClick = () => {
		hide()
	}
	
	defineExpose({
		show,
		hide
	})
</script>

<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: 630rpx;
		max-height: 70vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
	}
</style>