<template>
	<h-dark :title="t('auth.emailTitle')"></h-dark>
	<view class="mx-[30rpx]" v-if="data.info.auth_email==1">
		<view class="flex justify-center mt-[60rpx]">
			<u-image width="180" height="180" mode="widthFix" src="/static/images/user/authemail.png"></u-image>
		</view>
		<view class="my-[30rpx] leading-loose">
			{{t('auth.emailTips')}}
		</view>
		<view class="flex justify-between mt-[100rpx]">
			<view class="">
				<view class="text-[#00D2E0] mt-[10rpx]">
					{{data.info.email}}
				</view>
			</view>
			<view class="">
				<text class="">{{t('tabs.Verified')}}</text>
			</view>
		</view>
	</view>

	<view class="mx-[30rpx]" v-if="data.info.auth_email==0">
		<u-form :border-bottom="false" :label-width="150" label-position="top">
			<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('auth.email')" :border-bottom="false">
				<u-input class="flex-1" type="email" v-model="formData.email"
					:placeholder="t('auth.emailPlaceholder')" :border="false" />
			</u-form-item>
			<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.captcha')" :border-bottom="false">
				<u-input class="flex-1" v-model="formData.code" :placeholder="t('captcha.captchaPlaceholder')"
					:border="false" />
				<view class="border-l border-solid border-0 border-light pl-3 text-[#00D2E0] leading-4 ml-3 w-[180rpx]"
					@click="sendSms">
					<u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange"
						:change-text="t('captcha.changeText')" :startText="t('captcha.startText')"
						:endText="t('captcha.endText')" />
					<text :class="formData.email ? 'text-primary' : 'text-[#00D2E0]'">
						{{ codeTips }}
					</text>
				</view>
			</u-form-item>
		</u-form>
		<view class="font-bold flex justify-start items-center mb-[20rpx] mt-[30rpx]">
			<u-icon size="32" name="info-circle-fill"></u-icon>
			<view class="ml-[10rpx]">
				{{t('auth.warm')}}
			</view>
		</view>
		<view class="p-[20rpx] bg-[#3d4277] text-[#00D2E0] leading-loose rounded-lg">
			{{t('auth.warmTips')}}
		</view>
	</view>
	
	<view v-if="data.info.auth_email==0" class="max-w-[750px] fixed bottom-[50rpx] w-4/5 ml-[10%]">
		<u-button type="primary" :disabled="formData.code == ''||formData.code == ''" @click="submitHandle"> {{t('auth.bindBtn')}}
		</u-button>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref,shallowRef } from 'vue'
	import { emailSend } from '@/api/app'
	import { getUserInfo,verifyEmail } from '@/api/user'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('auth.emailTitle') })
	
	const uCodeRef = shallowRef()
	const codeTips = ref('')
	const data = ref<any>({
		info:{
			auth_email:2
		}
	})

	const formData = reactive<any>({
		email:'',
		code: ''
	})

	const getData = async () => {
		const res = await getUserInfo()
		data.value = res;
	}

	const codeChange = (text : string) => {
		codeTips.value = text
	}
	
	const sendSms = async () => {
		if (!formData.email) return
		var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
		if(!emailRegex.test(formData.email)){
			return uni.$u.toast(t('auth.emailEmpty'))
		}
		
		if (uCodeRef.value?.canGetCode) {
			await emailSend({
				email: formData.email,
			})
			uni.$u.toast(t('captcha.sendSuccessfully'))
			uCodeRef.value?.start()
		}
	}

	const submitHandle = async () => {
		await verifyEmail(formData)
		uni.$u.toast(t('network.bindingSuccessful'))
		getData();
	}
	getData()
</script>

<style lang="scss">
</style>