<template>
	<view>
		<h-dark :title="t('recharge.title')"></h-dark>
		<view class="mx-[30rpx] mt-[20rpx]">
			<view class="flex items-center bg-[#2C326B] rounded-lg px-[50rpx] py-[20rpx]">
				<u-icon size="80" :name="method.logo"></u-icon>
				<view class="ml-[16rpx]">{{method.name}}</view>
			</view>
			<view class="bg-[#2C326B] rounded-lg mt-[20rpx] p-[30rpx]">
				<view class="flex flex-col items-center">
					<u-image width="180px" height="180px" :src="method.qrcode"></u-image>
				</view>
				<view class="text-center text-[#00D2E0] mt-[30rpx]">
					<view class="mb-[16rpx]">{{t('recharge.address')}}</view>
					<view class="bg-[#3d4277] rounded p-[20rpx]">
						<view class="flex break-all items-center justify-center" v-if="method.address!=''">
							<view>{{method.address}}</view>
							<view @click.stop="copyText(method.address)"><u-icon size="26"
									name="/static/images/common/copy.png"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt-[50rpx] leading-loose">
				<view class="">
					{{replaceStr(t('recharge.udunTips1'),'{code}',method.protocol)}}
				</view>
				<view class="">
					{{t('recharge.udunTips2')}}
				</view>
				<view class="">
					{{t('recharge.udunTips3')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { rechargeMethodDetailUdun } from '@/api/finance'
	import { replaceStr } from '@/utils/util'
	import { useCopy } from '@/hooks/useCopy'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('recharge.title') })
	const { copy } = useCopy()
	const method = ref<any>({})
	const formData = reactive({
		id: 0,
		money: '',
	})

	const copyText = async (text : string) => {
		copy(text);
		uni.$u.toast(t('common.copySuccess'))
	}

	const getData = async (id : number) => {
		method.value = await rechargeMethodDetailUdun({ id })
	}
	onLoad((options : any) => {
		formData.id = options.id
		formData.money = options.money
		getData(formData.id)
	})
</script>

<style lang="scss">
</style>