<template>
	<view>
		<u-navbar :back-text="t('recharge.title')" :back-text-style="{color: '#FFFFFF'}" :background="{backgroundColor: '#4E55AF'}" back-icon-color="#FFFFFF" >
			<view class="flex justify-end w-full pr-[20rpx] relative">
				<navigator hover-class="none" url="/packages/pages/recharge/record">
					<u-icon size="40" name="/static/images/common/record.png"></u-icon>
				</navigator>
			</view>
		</u-navbar>
		<view class="bg-[#4E55AF] px-[30rpx] pt-[50rpx] pb-[15rpx]">
			<view class="flex flex-wrap">
				<view class="flex flex-col  items-center w-1/5" v-for="(item, index) in data.money_list" :key="index"
					@click="moneyChange(item)">
					<view class="item rounded-md px-[20rpx] py-[10rpx] bg-[#2C326B] mb-[15px]">
						{{getCurrency()}}{{item}}
					</view>

				</view>
			</view>
		</view>
		<view class="common-money my-[20rpx] mx-[30rpx]  py-[20rpx] ">
			<view class="  mb-[30rpx]">
				{{t('recharge.rechargeMoney')}}
			</view>
			<view class="bg-[#3d4277] rounded-lg px-[20rpx] py-[10rpx]">
				<u-input v-model="data.money" type="number" :border="false"
					:placeholder="t('recharge.rechargeMoneyPlaceholder')" />
			</view>
		</view>
		<view class="common-money my-[20rpx] px-[30rpx] py-[20rpx] mb-[80px]">
			<view class="  mb-[30rpx]">
				{{t('recharge.rechargeMethod')}}
			</view>
			<view class="">
				<view class="flex justify-between items-center bg-[#2C326B] rounded-lg p-[20rpx] mb-[30rpx]" v-for="(item, index) in data.method_list"
						:key="index"  @click="methodChange(item)">
					<view class="flex justify-start items-center">
						<view class="">
							<u-icon class="mr-[20rpx]" size="64" :name="item.logo"></u-icon>
						</view>
						<view class="">
							{{item.name}}
						</view>
					</view>
					
					<view class="">
						<u-icon v-if="item.id==data.method_id" size="32" class="check-box"
							name="checkbox-mark"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="h-[10rpx]">
		</view>
		<view class="fixed flex bottom-0 w-full py-[30rpx] px-[50rpx] justify-between z-10 leading-loose  max-w-[750px] bg-[#2C326B]">
			<view class="money-tips">
				{{t('recharge.money')}}
				<text class="money font-bold text-2xl">{{getCurrency()}}{{data.money}} {{getCurrency2()}}</text>
			</view>
			<view class="">
				<u-button type="primary" size="medium" shape="circle" :disabled="data.money == ''||data.method_type == 0"
					@click="submitHandle"> {{t('recharge.rechargeBtn')}} </u-button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, nextTick } from 'vue'
	import { rechargeMethod, commonMoney, rechargeConfig } from '@/api/finance'
	import { getCurrency,getCurrency2, formatMoney, t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('recharge.title') })
	const data = reactive({
		money: '',
		method_id: 0,
		method_type: 0,//1USDT2扫码3银行卡6波场7自定义地址
		money_list: [],
		method_list: [],
		min: 0,
	})
	const methodChange = (item : any) => {
		data.method_type = item.type;
		data.method_id = item.id;
	}

	const moneyChange = (money : string) => {
		data.money = money;
	}

	const submitHandle = () => {

		if (data.money == "") return uni.$u.toast(t('recharge.rechargeMoneyEmpty'))

		//充值金额判断
		if (parseFloat(data.money) < data.min) return uni.$u.toast(t('recharge.minMoney') + getCurrency() + data.min + getCurrency2())

		if (data.method_type == 0) {
			return uni.$u.toast(t('recharge.rechargeMethodEmpty'))
		}
		// 使用正则表达式匹配小数
		var decimalMatch = data.money.match(/\.(\d+)/);
		if (decimalMatch) {
			if (decimalMatch[1].length > 2) {
				data.money = formatMoney(data.money);
			}
		}

		let params = '?id=' + data.method_id + '&money=' + data.money;
		if (data.method_type == 1 || data.method_type == 2) {
			uni.redirectTo({
				url: '/packages/pages/recharge/recharge_qrcode' + params
			})
		} else if (data.method_type == 3) {
			uni.redirectTo({
				url: '/packages/pages/recharge/recharge_bank' + params
			})
		} else if (data.method_type == 4) {
			uni.redirectTo({
				url: '/packages/pages/recharge/recharge_online' + params
			})
		} else if (data.method_type == 5) {
			uni.navigateTo({
				url: '/packages/pages/recharge/recharge_udun' + params
			})
		} else if (data.method_type == 6) {
			uni.navigateTo({
				url: '/packages/pages/recharge/recharge_tron' + params
			})
		} else if (data.method_type == 7) {
			uni.navigateTo({
				url: '/packages/pages/recharge/recharge_address' + params
			})
		}
	}
	const getData = async () => {
		const res = await rechargeConfig()
		if(res.need_bing_wallet == 1){
			uni.redirectTo({
				url: '/packages/pages/withdraw/account'
			})
			return
		}
		
		data.min = res.min;
		
		data.money_list = await commonMoney()
		const apiData = await rechargeMethod()
		if (apiData.length > 0) {
			data.method_id = apiData[0]['id']
			data.method_type = apiData[0]['type']
		}
		data.method_list = apiData
	}
	getData()
</script>

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