<template>
	<view>
		<u-navbar :back-text="t('transfer.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="/pages/transfer/record">
					<u-icon size="40" name="/static/images/common/record.png"></u-icon>
				</navigator>
			</view>
		</u-navbar>
		<view class="px-[30rpx] pt-[30rpx]">
			<view class="rounded-lg overflow-hidden mb-[10rpx] bg-[#3d4277] p-[5rpx]">
				<u-tabs :list="tabList" v-model="formData.login_way" @change="changeType" :is-scroll="false" height="80"
					:show-bar="false" bg-color="#3d4277"
					:active-item-style="{'background-color':'#2C326B','border-radius':'5px'}"></u-tabs>
			</view>
			<u-form :border-bottom="false" :label-width="150" label-position="top">
				<u-form-item :itemStyle="{'background':'#3d4277'}" :border-bottom="false" :label="t('transfer.toUser')" v-if="formData.login_way == 1">
					<u-icon class="mr-[12rpx]" size="36" name="/static/images/login/mobile.png"></u-icon>
					<country-code :list="country_code.list" :show="picker_show" @update="handleCountryCode">
					</country-code>
					<view class="mr-[20rpx]" @click="picker_show=true">
						<text class="mr-[10rpx]">{{formData.country_code}}
						</text>
						<u-icon name="arrow-down" size="20"></u-icon>
					</view>
					<u-input class="flex-1" v-model="formData.account" type="number" :border="false"
						:placeholder="t('transfer.mobilePlaceholder')" />
				</u-form-item>
				<u-form-item :border-bottom="false" :itemStyle="{'background':'#3d4277'}" :label="t('transfer.toUser')" v-if="formData.login_way == 0">
					<u-icon class="mr-[12rpx]" size="36" name="/static/images/login/email.png"></u-icon>
					<u-input type="email" v-model="formData.account" :placeholder="t('transfer.emailPlaceholder')" :border="false" />
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#3d4277'}" :border-bottom="false" :label="t('transfer.money')">
					<u-input type="number" v-model="formData.money" @input="checkMoney" :border="false"
						:placeholder="t('transfer.moneyPlaceholder')" />
				</u-form-item>
				<view class="py-[25rpx]">
					<view class="text-[#00D2E0] font-bold mb-[10rpx]">
						{{t('withdraw.userMoney')}} {{getCurrency()}}{{formatMoney(data.user.balance)}} {{getCurrency2()}}
					</view>
				</view>
			</u-form>
		</view>

		<view class="mt-[30rpx] mx-[30rpx] max-w-[750px]">
			<u-button type="primary" :disabled="formData.account==''|| formData.money==''" @click="submitHandle"> {{t('common.submit')}} </u-button>
		</view>

		<view class="mt-[50rpx] mx-[30rpx] ">
			<view class="font-bold flex justify-start items-center mb-[20rpx]">
				<u-icon size="32" name="info-circle-fill"></u-icon>
				<view class="ml-[10rpx]">
					{{t('transfer.transferWarm')}}
				</view>
			</view>
			<view class="p-[20rpx] bg-[#3d4277] leading-loose rounded-lg" v-html="data.content"></view>
		</view>

		<u-keyboard class="max-w-[750px]" ref="uKeyboard1" mode="number" :dot-enabled="false" :tips="t('pwd.payPwd')"
			confirm-text="" cancel-text="" v-model="show_keyboard" @change="keyboardChange" @backspace="backspace"
			:show-input-val="true" :input-value="formData.pay_pwd"></u-keyboard>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, nextTick } from 'vue'
	import { useAppStore } from '@/stores/app'
	import { getCountryCode } from '@/api/app'
	import { getHintDetail } from '@/api/news'
	import { transferIndex, transfer } from '@/api/finance'
	import { getCurrency,getCurrency2, formatMoney, t, isEmpty } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('transfer.title') })

	const appStore = useAppStore()
	const show_keyboard = ref(false)
	const picker_show = ref(false)

	const tabList = ref([
		{
			name: t('login.tab1'),
		},
		{
			name: t('login.tab2'),
		}
	])

	const data = reactive({
		user: {
			balance: 0
		},
		config: {
			min: 0,
			max: 0,
			need_set_pwd: 0,
		},
		content: ''
	})

	const country_code = reactive<{
		list : any[]
		default_select : number
	}>({
		list: [],
		default_select: 0
	})

	const formData = reactive({
		login_way: 0,
		transfer: 1,
		money: '',
		country_code: '',
		account: '',
		pay_pwd: '',
	})

	const changeType = () => {
		formData.account = ''
	}

	const getData = async () => {
		const res = await transferIndex()
		data.config = res.config
		data.user = res.user

		if (data.config.need_set_pwd == 1) {
			uni.$u.toast(t('pwd.pwdSetFirstTips'))
			uni.redirectTo({
				url: '/pages/change_password/set_password_pay'
			})
			return
		}
		const resHint = await getHintDetail({ id: 13 })
		data.content = resHint.content;

		let resCountry = appStore.getLoginConfig.region_code
		if (isEmpty(resCountry)) resCountry = await getCountryCode()
		country_code.list = resCountry;
		formData.country_code = resCountry[0]['code']
	}

	const handleCountryCode = (data : any) => {
		picker_show.value = data['show']
		if (data['code'] != '') {
			formData.country_code = data['code'];
		}
	}

	const keyboardChange = (val : string) => {
		formData.pay_pwd += val;
		if (formData.pay_pwd.length == 6) {
			show_keyboard.value = false;
			submit();
		}
	}
	const backspace = () => {
		// 删除value的最后一个字符
		if (formData.pay_pwd.length) formData.pay_pwd = (formData.pay_pwd).substr(0, (formData.pay_pwd.length) - 1);
	}

	const checkMoney = (money : string) => {
		var precision = uni.getStorageSync('precision')
		// 使用正则表达式匹配小数
		var decimalMatch = money.match(/\.(\d+)/);
		if (decimalMatch) {
			if (decimalMatch[1].length >= precision) {
				nextTick(() => {
					formData.money = parseFloat(money).toFixed(precision);
				})
			}
		}
	}

	const submitHandle = async () => {
		if (!formData.account) return uni.$u.toast(t('transfer.mobileEmpty'))
		if (!formData.money) return uni.$u.toast(t('transfer.moneyEmpty'));

		//转账金额判断
		if (parseFloat(formData.money) - data.user.balance > 0) return uni.$u.toast(t('common.InsufficientBalance'));

		if (parseFloat(formData.money) < data.config.min) return uni.$u.toast(t('transfer.moneyMin') + ': ' + getCurrency() + data.config.min + ' ' +  getCurrency2())
		if (parseFloat(formData.money) > data.config.max) return uni.$u.toast(t('transfer.moneyMax') + ': ' + getCurrency() + data.config.max + ' ' +  getCurrency2())

		formData.pay_pwd = '';
		show_keyboard.value = true;
	}
	const submit = async () => {
		await transfer(formData)

		uni.redirectTo({
			url: '/pages/transfer/record'
		})
	}
	getData()
</script>

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