<template>
	<view class="self-service-utr-container">
		<view class="self-service-utr-card plr30 ptb24 flex-acenter flex-sbetween" style="border-radius: 19rpx;" :style="{ background: themeStore.theme.lightBgColor }" @click.stop="handleSelfUtrClick">
			<view>
				<view class="ft12" :style="{ color: themeStore.theme.text.normal }">
					{{ $t('deposit.message.tipsUtr1') }}:
					<!-- <span class="ml24" :style="{ color: themeStore.theme.text.theme }">{{ $t('deposit.message.tipsUtr2') }}</span> -->
				</view>
				<view class="ft11 mt12" :style="{ color: themeStore.theme.text.theme }">
					{{ $t('deposit.message.tipsUtr3') }}
				</view>
			</view>
			<theme-image 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'
	import Toast from '@/module/toast/toast.js'
	import { useI18n } from 'vue-i18n'
	
	const appStore = useAppStore()
	const themeStore = useThemeStore()
	const userStore = useUserStore()
	const { t } = useI18n()
	
	const props = defineProps({
		pendingCount: {
			type: Number,
			default: 0
		},
		orderNo: {
			type: String,
			default: ''
		}
	})
	
	const handleSelfUtrClick = () => {
		if (props.orderNo) {
			if (appStore.appConfig.manualPendingMaxCount && appStore.appConfig.manualPendingMaxCount > 0) {
				if (props.pendingCount >= appStore.appConfig.manualPendingMaxCount) {
					Toast.show(`${t('deposit.toast.text5')} ${appStore.appConfig.manualPendingMaxCount} ${t('deposit.toast.text6')}`)
					return
				}
			}
			openUrl(`${appStore.manualRechargeUrl}?userId=${userStore.userInfo.id}&orderNo=${props.orderNo}`)
		} else {
			uni.navigateTo({
				url: '/pages/wallet/SelfUtrInfo'
			})
		}
	}
</script>

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