<template>
	<u-navbar :title="t('pwd.fgLoginPwd')" :background="{backgroundColor: '#0066ff'}" back-icon-color="#FFFFFF"
		title-color="#FFFFFF">
		<view class="flex justify-end w-full pr-[20rpx]">
			<navigator hover-class="none" url="/pages/kefu/index">
				<u-icon size="40" name="/static/images/common/kefu.png"></u-icon>
			</navigator>
		</view>
	</u-navbar>
	<view class="flex flex-col items-center px-[40rpx] box-border">
		<view class="w-full">
			<u-form :border-bottom="false" :label-width="150" label-position="top">
				<u-form-item :itemStyle="{'background':'#f6f7fb'}" :label="t('pwd.mobile')" :border-bottom="false"
					:required="true">
					<country-code :list="country_code.list" :show="picker_show" @update="handleCountryCode">
					</country-code>
					<view class="mr-[20rpx]" @click="picker_show=true">
						<text class="mr-[10rpx]">{{formData.country_code}}
						</text>
						<u-icon name="arrow-down" size="20"></u-icon>
					</view>
					<u-input class="flex-1" v-model="formData.mobile" type="number" :border="false"
						:placeholder="t('pwd.mobilePlaceholder')" />
				</u-form-item>
				<view class="rounded-lg overflow-hidden mt-[20rpx] p-[7rpx] bg-[#F0F2F6]">
					<u-tabs :list="tabList" v-model="formData.type" @change="changeType" :is-scroll="false" height="60"
						:show-bar="false" bg-color="#F0F2F6"
						:active-item-style="{'background-color':'#FFFFFF','border-radius':'5px'}"></u-tabs>
				</view>
				<u-form-item :itemStyle="{'background':'#f6f7fb'}" :label="t('auth.email')" :border-bottom="false"
					:required="true" v-if="formData.type==1">
					<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':'#f6f7fb'}" :label="t('pwd.captcha')" :border-bottom="false"
					:required="true" v-if="formData.type==1">
					<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-muted 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-muted'">
							{{ codeTips }}
						</text>
					</view>
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#f6f7fb'}" :label="t('pwd.captcha')" :border-bottom="false" :required="true"
					v-if="formData.type==0">
					<u-input class="flex-1" v-model="formData.code" :placeholder="t('captcha.captchaPlaceholder')"
						:border="false" />
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#f6f7fb'}" :label="t('pwd.newPwd')" :border-bottom="false"
					:required="true">
					<u-input class="flex-1" type="password" v-model="formData.password"
						:placeholder="t('pwd.newPwdPlaceholder')" :border="false" />
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#f6f7fb'}" :label="t('pwd.confirmPwd')" :border-bottom="false"
					:required="true">
					<u-input class="flex-1" type="password" v-model="formData.password_confirm"
						:placeholder="t('pwd.confirmPwdPlaceholder')" :border="false" />
				</u-form-item>
			</u-form>
			<view class="mt-[100rpx]  pb-[60rpx]">
				<u-button type="primary" v-if="formData.type==0"
					:disabled="formData.mobile==''||formData.code==''||formData.password==''||formData.password_confirm==''"
					@click="handleConfirm"> {{t('common.submit')}} </u-button>

				<u-button type="primary" v-if="formData.type==1"
					:disabled="formData.mobile==''||formData.email==''||formData.code==''||formData.password==''||formData.password_confirm==''"
					@click="handleConfirm"> {{t('common.submit')}} </u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { sendEmailNoLogin, getCountryCode } from '@/api/app'
	import { useAppStore } from '@/stores/app'
	import { forgotPassword } from '@/api/user'
	import { SMSEnum } from '@/enums/appEnums'
	import { reactive, ref, shallowRef } from 'vue'
	import { t, isEmpty } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('pwd.titleForgetPwd') })

	const appStore = useAppStore()
	const uCodeRef = shallowRef()
	const codeTips = ref('')

	const picker_show = ref(false)
	const country_code = reactive<{
		list : any[]
		default_select : number
	}>({
		list: [],
		default_select: 0
	})
	const tabList = ref([
		{
			name: t('pwd.authGoogle'),
		},
		{
			name: t('pwd.authEmail'),
		}
	])

	const changeType = (index : number) => {
		formData.type = index
	}
	const formData = reactive({
		mobile: '',
		email: '',
		code: '',
		password: '',
		password_confirm: '',
		country_code: '',
		type: 0
	})

	const getData = async () => {
		let data = appStore.getLoginConfig.region_code
		if (isEmpty(data)) data = await getCountryCode()
		country_code.list = data;
		formData.country_code = data[0]['code']
	}
	const handlePicker = (index : number) => {
		country_code.default_select = index;
		formData.country_code = country_code.list[index];
	}
	const handleCountryCode = (data : any) => {
		picker_show.value = data['show']
		if (data['code'] != '') {
			formData.country_code = data['code'];
		}
	}

	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 sendEmailNoLogin({
				country_code: formData.country_code,
				mobile: formData.mobile,
				email: formData.email,
			})
			uni.$u.toast(t('captcha.sendSuccessfully'))
			uCodeRef.value?.start()
		}
	}

	const handleConfirm = async () => {
		if (!formData.mobile) return uni.$u.toast(t('pwd.mobileEmpty'))
		if (!formData.code) return uni.$u.toast(t('captcha.captchaEmpty'))
		if (!formData.password) return uni.$u.toast(t('pwd.newPwdEmpty'))
		if (!formData.password_confirm) return uni.$u.toast(t('pwd.confirmPwdEmpty'))
		if (formData.password != formData.password_confirm) return uni.$u.toast(t('pwd.twoPwdError'))
		await forgotPassword(formData)
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}
	getData()
</script>

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

	.register {
		height: 100%;
	}
</style>