<template>
	<view>
		<h-dark :title="t('withdraw.withdrawAccountManage')"></h-dark>
		<view class="mt-[40rpx]">
			<u-cell-group>
				<u-cell-item v-for="(method, index) in data.methods" :title="method.name"
					:label="method.status?method.account:method.name" :arrow="false"
					hover-class="cell-hover-class">
					<template v-slot:icon>
						<u-icon class="mr-[15rpx]" size="100" :name="method.logo"></u-icon>
					</template>
					<template v-slot:right-icon>
						<view v-if="method.status" class="">
							{{t('withdraw.binded')}}
						</view>
						<navigator class="text-primary" v-if="!method.status&&method.type==1" hover-class="none"
							:url="'/packages/pages/withdraw/account_usdt?id='+method.id+'&name='+method.name+'&is_qrcode='+method.is_qrcode">
							{{t('withdraw.toBind')}}
						</navigator>
						<navigator class="text-primary" v-if="!method.status&&method.type==2" hover-class="none"
							:url="'/packages/pages/withdraw/account_qrcode?id='+method.id+'&name='+method.name">
							{{t('withdraw.toBind')}}
						</navigator>
						<navigator class="text-primary" v-if="!method.status&&method.type==3" hover-class="none"
							:url="'/packages/pages/withdraw/account_bank?id='+method.id+'&name='+method.name">
							{{t('withdraw.toBind')}}
						</navigator>
					</template>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="mt-[50rpx] mx-[26rpx] ">
			<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('withdraw.withdrawWarm')}}
				</view>
			</view>
			<view class="p-[20rpx] bg-[#F8F9FB] leading-loose rounded-lg" v-html="data.content"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onShow } from '@dcloudio/uni-app'
	import { reactive } from 'vue'
	import { getWithdrawMethod, getWithdrawWallet } from '@/api/finance'
	import { getHintDetail } from '@/api/news'
	import { t } from '@/utils/util'
	
	uni.setNavigationBarTitle({ title: t('withdraw.withdrawAccountManage') })
	const data = reactive({
		methods: [],
		wallets: [],
		content:''
	})
	const getData = async () => {
		data.wallets = await getWithdrawWallet()
		data.methods = await getWithdrawMethod()

		data.methods.forEach((method : any) => {
			data.wallets.forEach((wallet : any) => {
				if (method['id'] - wallet['method_id'] == 0) {
					method['status'] = true;
					method['account'] = wallet['account'];
				}
			})
		})
		
		const res =  await getHintDetail({id:12})
		data.content = res.content;
	}
	onShow(() => {
		getData()
	})
</script>

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