<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="text-center">
					<view class="mb-[16rpx] text-[#00D2E0]">{{t('recharge.address')}}</view>
					<view class="bg-[#3d4277] rounded p-[20rpx] rounded-lg">
						<view class="flex break-all items-center justify-center" @click.stop="copyText(method.address)">
							<view class="mr-[10rpx]">{{method.address}}</view>
							<view>
								<u-icon size="26" name="/static/images/common/copy.png">
								</u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-[#2C326B] rounded-lg mt-[20rpx] px-[30rpx] py-[30rpx]">
				<view class="text-[#00D2E0] mb-[10rpx]">
					{{t('recharge.rechargeMoney')}}
				</view>
				<view class="">
					<view class="font-bold text-lg py-[10rpx]">
						{{getCurrency()}}{{formData.money}} {{getCurrency2()}}
						<text class="text-[#00D2E0]" v-if="method.rate!=1">(≈
							{{formatMoney(formData.money,method.symbol,method.rate,method.precision)}})</text>
					</view>
				</view>
				<view class="text-[#00D2E0] my-[20rpx]" v-if="method.is_voucher">
					{{t('recharge.voucher')}}
				</view>
				<view class="" v-if="method.is_voucher">
					<view class="bg-[#3d4277] rounded w-full flex justify-center">
						<u-upload class="" ref="uploader" :custom-btn="true" :deletable="false" :auto-upload="false"
							max-count="1" :max-size="20*1024*1024" v-model="formData.voucher">
							<template v-slot:addBtn>
								<view class="flex items-center justify-center slot-btn w-[180rpx] h-[180rpx] "
									hover-class="slot-btn__hover" hover-stay-time="150">
									<u-icon name="photo" size="80" class="text-[#00D2E0]"></u-icon>
								</view>
							</template>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="my-[30rpx]">
				<u-button type="primary" @click="handleConfirm"> {{t('common.submit')}} </u-button>
			</view>
			<view class="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 { rechargeMethodDetailAddress, recharge } from '@/api/finance'
	import { uploadImage } from '@/api/app'
	import { useUserStore } from '@/stores/user'
	import { formatDate, formatMoney, getCurrency,getCurrency2, replaceStr } from '@/utils/util'
	import { useCopy } from '@/hooks/useCopy'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('recharge.title') })
	const { copy } = useCopy()
	const userStore = useUserStore()
	const uploader = ref();
	const method = ref<any>({})
	const formData = reactive({
		id: 0,
		money: '',
		address: '',
		voucher: '',
		date: formatDate(Math.round(Date.now() / 1000))
	})

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

	const handleConfirm = async () => {
		if (method.value.is_voucher) {
			if (uploader.value.lists.length <= 0) return uni.$u.toast(t('recharge.voucherEmpty'))
			const res : any = await uploadImage(uploader.value.lists[0].url, userStore.temToken!)
			formData.voucher = res.url;
		}
		await recharge(formData)
		uni.redirectTo({
			url: '/pages/common/successful?type=0'
		})
	}

	const getData = async (id : number) => {
		const res = await rechargeMethodDetailAddress({ id })

		//计算每日获取次数
		if (!uni.getStorageSync('address_avail_num_' + formData.id)) {
			uni.setStorageSync('address_avail_num_' + formData.id, res.date + ',' + 1);
		} else {
			//对比时间
			var str = uni.getStorageSync('address_avail_num_' + formData.id);
			const str_arr = str.split(',');
			if (str_arr[0] == res.date) {
				if (parseInt(str_arr[1]) >= res.avail_num) {
					uni.$u.toast(t('recharge.addressNumTips'))
					let canNavBack = getCurrentPages()
					if (canNavBack && canNavBack.length > 1) {
						uni.navigateBack()
					} else {
						history.back();
					}
					return;
				}

				uni.setStorageSync('address_avail_num_' + formData.id, res.date + ',' + (parseInt(str_arr[1]) + 1));
			} else {
				uni.setStorageSync('address_avail_num_' + formData.id, res.date + ',' + 1);
			}
		}

		method.value = res;
		formData.address = res.address;

	}
	onLoad((options : any) => {
		formData.id = options.id
		formData.money = options.money
		getData(formData.id)
	})
</script>

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