<template>
	<view>
		<NavBar />
		<view class="container">
			<view class="title">
				<PageTitle :title="$t('home.goldout')" />
			</view>
			<view class="content">
				<image src="/static/capital/wallet.png" mode="aspectFit" style="width: 60px; height: 49px"></image>
				<text class="successTitle">{{ $t('capital.verifyWallet') }}</text>
				<text class="successDesc">{{ $t('capital.verifyWalletDesc') }}</text>
			</view>
			<view class="btns">
				<button :disabled="sendBtnDisabled || sending" :class="['btn', 'primaryButton', sendBtnDisabled ? 'disable' : '']" type="button" @click="sendCode">
					<image v-show="sending" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
					{{ $t('capital.sendEmail') }}
				</button>
				<view class="resendSection">
					<view class="countdown" v-if="sendBtnWaiting">
						{{ sendBtnWaiting }}s
						<text style="color: #333">{{ $t('capital.secondAfter') }}</text>
					</view>
					<view class="resend" @click="sendCode">
						<image src="/static/capital/resend.png" mode="aspectFit" :class="['resendIcon', sending ? 'sending' : '']"></image>
						<text>{{ $t('capital.resend') }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user';
import { sendCodePersonal, verifyEmail } from '@/services/user/completeInfo.ts';
import { sendBankMail } from '@/services/capital/withDraw.ts';

import { UserLanguage } from '@/utils/const.ts';
export default {
	name: '',
	data() {
		return {
			sending: false,
			second: 60,
			sendBtnWaiting: '',
			sendBtnDisabled: false
		};
	},
	methods: {
		async sendCode() {
			if (this.sendBtnDisabled) return;
			this.sendBtnDisabled = true;
			const userStore = useUserStore();
			this.sending = true;
			const res = await sendBankMail({
				id: this.id,
				qcc_language: UserLanguage
			});
			this.sending = false;
			this.sendBtnWaiting = 60;
			let timer = setInterval(() => {
				if (this.sendBtnWaiting > 0) {
					this.sendBtnWaiting -= 1;
				} else {
					this.sendBtnDisabled = false;
					clearInterval(timer);
				}
			}, 1000);
			let success = false;
			if (res && res.code === 0) {
				this.$cusModal.showModal({
					type: 'message',
					status: 'success',
					contentText:  this.$t('form.verificationCode.sendSuccess')
				});
				success = true;
			} else {
				this.$cusModal.showModal({
					type: 'message',
					status: 'warning',
					contentText: res.msg ?? this.$t('common.error.sysError')
				});
			}
			return success;
		},
		handleContinueDeposit() {
			uni.redirectTo({
				url: '/pages/capital/deposit/index'
			});
		},
		handleTradeRecord() {
			uni.redirectTo({
				url: '/pages/capital/tradeRecord/index'
			});
		}
	},
	created() {},
	onLoad(params) {
		if (params.id) {
			this.id = params.id;
			this.sendCode();
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
