<template>
	<view v-if="pageData.visible">
		<NormalPopupView
			@close="hide"
		>
			<view class="flex-column ptb24">
				<view class="ft18" style="text-align: center;" :style="{ 'color': themeStore.theme.text.normal }">
					{{ $t('deposit.orderConfirmation') }}
				</view>
				<view class="ft15 mt40" :style="{ 'color': themeStore.theme.text.normal }">
					{{ $t('deposit.transferAmount') }}
				</view>
				<view class="mt20 ft32 fwbold" :style="{ 'color': themeStore.theme.text.theme }">
					{{ appStore.currencySign }} {{ $formatThousandDot(pageData.amount) }}
				</view>
				<view class="mt20 ft15" :style="{ 'color': themeStore.theme.text.normal }">
					{{ $t('deposit.utr') }}
				</view>
				<view class="mt20 ft32 fwbold" :style="{ 'color': themeStore.theme.text.theme }">
					{{ pageData.utr }}
				</view>
				<view class="mt40 ft12" :style="{ 'color': themeStore.theme.text.normal }">
					{{ $t('deposit.message.popupTip') }}
				</view>
				<view class="mt40 flex-scenter">
					<view class="ft16 flex-acenter flex-scenter confirm-btn" :style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }" @click.stop="handleConfirmClick">
						<view :style="{ 'color': themeStore.theme.button.textNormal }">
							{{ $t('deposit.button.confirm') }}
						</view>
					</view>
				</view>
			</view>
		</NormalPopupView>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import NormalPopupView from '@/components/popup/NormalPopupView.vue'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useAppStore } from '@/store/useAppStore'
	
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	
	const emit = defineEmits(['confirm'])
	const pageData = reactive({
		visible: false,
		utr: '',
		depositAmount: ''
	})
	
	const show = (options) => {
		pageData.utr = options.utr || ''
		pageData.amount = options.amount || ''
		pageData.visible = true
	}
	
	const hide = () => {
		pageData.visible = false
	}
	
	const handleConfirmClick = () => {
		emit('confirm')
	}
	
	defineExpose({
		show,
		hide
	})
</script>

<style lang="scss" scoped>
	.confirm-btn {
		width: 232rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
</style>
