<template>
	<view>
		<h-dark :title="title"></h-dark>
		<view class="mt-[40rpx]">
			<view class=" px-[40rpx] mb-[15rpx]">
				* {{t('withdraw.address')}}
			</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.addressPlaceholder')" />
				</view>
			</view>

			<view class=" px-[40rpx] mb-[15rpx] mt-[30rpx]" v-if="formData.is_qrcode==1">
				* {{t('withdraw.qrcode')}}
			</view>
			<view class="px-[40rpx] py-[15rpx]" v-if="formData.is_qrcode==1">
				<view class="bg-[#f6f7fb] rounded-lg 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.img">
						<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-muted"></u-icon>
							</view>
						</template>
					</u-upload>
				</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 { uploadImage } from '@/api/app'
	import { useUserStore } from '@/stores/user'
	import { withdrawWalletAdd } from '@/api/finance'
	import { t } from '@/utils/util'

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

	const title = ref('')
	const formData = reactive({
		account: '',
		img: '',
		type: 1,//类型1USDT2扫码3银行卡
		method_id: '',
		is_qrcode: 0
	})
	const userStore = useUserStore()
	const uploader = ref();

	const handleConfirm = async () => {
		if (!formData.account) return uni.$u.toast(t('withdraw.addressEmpty'))
		if (formData.account.length < 8 || formData.account.length > 128) return uni.$u.toast(t('withdraw.addressError'))
		
		if(formData.is_qrcode==1){
			if (uploader.value.lists.length <= 0) return uni.$u.toast(t('withdraw.qrcodeEmpty'))
			const res : any = await uploadImage(uploader.value.lists[0].url, userStore.temToken!)
			formData.img = res.url;
		}
		await withdrawWalletAdd(formData)
		uni.redirectTo({
			url: '/pages/common/successful?type=3'
		})
	}
	onLoad((options : any) => {
		formData.method_id = options.id
		title.value = options.name;
		formData.is_qrcode = options.is_qrcode;
	})
</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>