<template>
	<NormalPopupView
		v-if="depositStore.showDepositClosePopup"
		@close="hide"
	>
		<view class="tips-popup-content">
			<view class="title" :style="{ color: themeStore.theme.text.normal }">
				{{ $t('app.popup.tips') }}
			</view>
			<view class="text" :style="{ color: themeStore.theme.text.normal }">
				{{$t('deposit.closePopup.text') }}
			</view>
			<view class="confirm-button" :style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }" @click.stop="handleConfirmClick">
				<view>
					{{ $t('deposit.closePopup.confirm') }}
				</view>
			</view>
		</view>
	</NormalPopupView>
</template>

<script setup>
	import { ref } from 'vue';
	import NormalPopupView from '@/components/popup/NormalPopupView.vue'
	import { useThemeStore } from '@/store/useThemeStore'
	import { openUrl } from '@/module/utils/openUrl'
	import { useUserStore } from '@/store/useUserStore.js'
	import { useDepositStore } from '@/store/useDepositStore'
	
	const themeStore = useThemeStore()
	const userStore = useUserStore()
	const depositStore = useDepositStore()
	
	const show = () => {
		depositStore.showDepositClosePopup = true
	}
	
	const hide = () => {
		depositStore.showDepositClosePopup = false
	}
	
	const handleConfirmClick = () => {
		openUrl(userStore.serviceUrl)
		hide()
	}
	
	defineExpose({
		show,
		hide
	})
</script>

<style lang="scss" scoped>
	.tips-popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.title {
			font-size: 38rpx;
			font-weight: bold;
		}
		
		.text {
			margin-top: 50rpx;
			font-size: 30rpx;
			max-height: 300rpx;
			overflow-y: scroll;
		}
		
		.confirm-button {
			margin-top: 50rpx;
			min-width: 300rpx;
			max-width: 500rpx;
			height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>