<template>
	<view class="self-service-utr-container">
		<view class="self-service-utr-card plr30 ptb24 flex-acenter flex-sbetween" style="border-radius: 30rpx;" :style="{ background: themeStore.theme.lightBgColor }" @click.stop="handleSelfUtrClick">
			<view class="flex-acenter flex-sbetween flex-1 pr16">
				<view class="ft12" :style="{ color: themeStore.theme.text.normal }">
					{{ $t('deposit.message.tipsUtr4') }}
				</view>
				<view class="ft12" :style="{ color: themeStore.theme.text.subtitle }">
					{{ $t('deposit.message.tipsUtr5') }}
				</view>
			</view>
			<theme-image class="flex-shrink-0" src="@/static/wallet/icon-arrow-right-red.png" mode="aspectFit" style="width: 16rpx; height: 30rpx;" />
		</view>
	</view>
</template>

<script setup>
	import { useAppStore } from '@/store/useAppStore'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useUserStore } from '@/store/useUserStore'
	import { openUrl } from '@/module/utils/openUrl'
	
	const appStore = useAppStore()
	const themeStore = useThemeStore()
	const userStore = useUserStore()
	
	const props = defineProps({
		orderId: {
			type: String,
			default: ''
		}
	})
	
	const handleSelfUtrClick = () => {
		if (props.orderId) {
			openUrl(`${appStore.FAQ}?userId=${userStore.userInfo.id}&orderId=${props.orderId}`)
		}
	}
</script>

<style lang="scss" scoped>
	.self-service-utr-container {
		
		.self-service-utr-card {
			height: 130rpx;
		}
	}
</style>