<template>
	<view>
		<h-dark :title="title"></h-dark>
		<view class="mt-[40rpx]">
			<view class=" px-[40rpx] mb-[15rpx]">
				* {{t('withdraw.bankname')}}
			</view>
			<view class="account  px-[40rpx] py-[30rpx]">
				<view class="bg-[#f6f7fb] rounded-lg px-[20rpx] py-[10rpx] ">
					<view class="py-[16rpx]">
						<u-picker class="max-w-[750px]" mode="selector" v-model="picker_show"
							:default-selector="[banks.default_select]" :range="banks.list" range-key="name"
							@confirm="handlePicker" :confirm-text="t('common.confirm')"
							:cancel-text="t('common.cancel')">
						</u-picker>
						<view class="mr-[20rpx]" @click="picker_show=true">
							<text class="mr-[10rpx]">{{formData.bank_name}}
							</text>
							<u-icon name="arrow-down" size="20"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class=" px-[40rpx] mb-[15rpx] mt-[30rpx]">
				* {{t('withdraw.bankUsername')}}
			</view>
			<view class="account  px-[40rpx] py-[15rpx]">
				<view class="bg-[#f6f7fb] rounded-lg px-[20rpx] py-[10rpx] ">
					<u-input class="flex-1" v-model="formData.name" :border="false"
						:placeholder="t('withdraw.bankUsernamePlaceholder')" />
				</view>
			</view>
			<view class=" px-[40rpx] mb-[15rpx] mt-[30rpx]">
				* {{t('withdraw.bankAccount')}}
			</view>
			<view class="account  px-[40rpx] py-[15rpx]">
				<view class="bg-[#f6f7fb] rounded-lg px-[20rpx] py-[10rpx] ">
					<u-input class="flex-1" v-model="formData.account" :border="false"
						:placeholder="t('withdraw.bankAccountPlaceholder')" />
				</view>
			</view>
		</view>
		<view class="px-[40rpx] mt-[50rpx] leading-loose font-bold">
			<view class="text-error ">
				{{t('withdraw.tips1')}}
			</view>
			<view class="text-error">
				{{t('withdraw.tips2')}}
			</view>
		</view>
		<view class=" px-[40rpx] my-[80rpx]  pb-[50rpx]">
			<u-button type="primary" @click="handleConfirm"> {{t('withdraw.bindBtn')}} </u-button>
		</view>
	</view>
</template>

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

	uni.setNavigationBarTitle({ title: t('withdraw.withdrawAccountManage') })
	const title = ref('')

	const picker_show = ref(false)

	const banks = reactive<{
		list : any[]
		default_select : number
	}>({
		list: [],
		default_select: 0
	})
	const formData = reactive({
		bank_id: '',
		name: '',
		account: '',
		type: 3,//类型1USDT2扫码3银行卡
		method_id: '',
		bank_name: ''
	})

	const getData = async () => {
		let data = await getWithdrawBanks()
		banks.list = data;
		formData.bank_id = data[0]['id']
		formData.bank_name = data[0]['name']
	}

	const handlePicker = (index : number) => {
		banks.default_select = index;
		formData.bank_id = banks.list[index]['id'];
		formData.bank_name = banks.list[index]['name'];
	}

	const handleConfirm = async () => {
		if (formData.bank_id == "") return uni.$u.toast(t('withdraw.banknameEmpty'))

		if (!formData.name) return uni.$u.toast(t('withdraw.bankUsernameEmpty')
		)
		if (formData.name.length < 2 || formData.name.length > 30) return uni.$u.toast(t('withdraw.banknameError'))

		if (!formData.account) return uni.$u.toast(t('withdraw.bankAccountEmpty'))
		if (formData.account.length < 6 || formData.account.length > 30) return uni.$u.toast(t('withdraw.bankAccountError'))

		await withdrawWalletAdd(formData)
		uni.redirectTo({
			url: '/pages/common/successful?type=3'
		})
	}
	onLoad((options : any) => {
		formData.method_id = options.id
		title.value = options.name;
		getData()
	})
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.shadow-inner {
		border-radius: 10px;
		padding: 5px 10px;
		box-shadow: inset 0px 1px 4px 0px rgb(0 0 0 / 0.3);
	}
</style>