<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('verifyEmail.pageTitle')" />
		</view>
		<view class="content">
			<view class="subTitle">
				<text>{{ $t('verifyEmail.subTitleBefore') }}</text>
				<text style="color: #29bbe4; word-break: break-all">{{ userEmail }}</text>
				<text>{{ $t('verifyEmail.subTitleAfter') }}</text>
			</view>
			<view class="inputsWrapper">
				<view @click="clickCodeInput" style="position: absolute; z-index: 10; width: 100%; height: 100%"></view>
				<view class="input" v-for="index in 6" :key="index">
					<uni-forms-item :name="`code${index}`">
						<uni-easyinput
							:ref="`codeInput${index}`"
							:maxlength="6"
							trim="all"
							primaryColor="#29BBE4"
							:inputBorder="false"
							:clearable="false"
							v-model="emailForm[`code${index}`]"
						></uni-easyinput>
					</uni-forms-item>
				</view>
			</view>
			<view style="overflow: hidden">
				<view class="codeInput">
					<uni-easyinput maxlength="6" primaryColor="#29BBE4" :focus="codeInputFocus" @blur="codeInputBlur" @input="codeInput"></uni-easyinput>
				</view>
			</view>
			<view class="resendCode" @click="sendCode">
				<image src="/static/reload.png" mode="aspectFit" :class="['resendIcon', sendCodeBtnLoading ? 'loading' : '']"></image>
				<text>{{ $t('form.verificationCode.invalid') }}</text>
			</view>
			<view>
				<button class="primaryButton" @click="handleVerifyEmail">{{ $t('form.verifyNow') }}</button>
			</view>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user';
import { sendCodePersonal, verifyEmail } from '@/services/user/completeInfo.ts';
import { UserLanguage } from '@/utils/const.ts';
export default {
	data() {
		return {
			userEmail: undefined,
			emailForm: {},
			sendCodeBtnLoading: false,
			codeInputFocus: false
		};
	},
	methods: {
		clickCodeInput() {
			this.codeInputFocus = true;
		},
		codeInputBlur() {
			this.codeInputFocus = false;
		},
		codeInput(val, index) {
			for (let i = 0; i < 6; i++) {
				this.emailForm[`code${i + 1}`] = val.charAt(i) ?? '';
			}
		},
		async sendCode() {
			const userStore = useUserStore();
			this.sendCodeBtnLoading = true;
			const res = await sendCodePersonal({
				email: userStore.userInfo.email,
				qcc_language: UserLanguage
			});
			this.sendCodeBtnLoading = false;
			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;
		},
		async handleVerifyEmail() {
			const code = Object.values(this.emailForm).join('');
			const res = await verifyEmail({
				code,
				qcc_language: UserLanguage
			});
			if (res && res.code === 0) {
        uni.redirectTo({
          url: '/pages/user/personalInformation/email/success/index'
        });
			} else {
				this.$cusModal.showModal({
					type: 'message',
					status: 'warning',
					contentText: res.msg ?? this.$t('common.error.sysError')
				});
			}
		}
	},
	created() {
		const userStore = useUserStore();
		this.userEmail = userStore.userInfo.email;
		this.sendCode();
	}
};
</script>

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