<template>
<view class="forgot-wrap" :class="[`${themeInfo.theme}-theme`]">
	<navBar></navBar>
	<view class="container">
		<view class="logoBox">
			<image src="/static/logo.png" mode=""></image>
			<text>EMPOWER YOUR SELF STORAGE</text>
		</view>
		<view class="formBox">
			<view class="form">
			<uv-form labelPosition="left"  :model="state" labelWidth='160rpx' :rules="rules" ref='formRef'>
						<uv-form-item :label="$t('login.account')" prop="username" borderBottom>
							<uv-input v-model="state.username" :placeholder="$t('login.account')" border="none">
							</uv-input>
						</uv-form-item>
						<uv-form-item :label="$t('login.password')" prop="password" borderBottom >
							<uv-input v-model="state.password"  :placeholder="$t('login.password')" :type='state.passwordVisible?"text":"password"' border="none">
								<template #suffix>
									
									<uv-icon @click="state.passwordVisible = !state.passwordVisible" :name="state.passwordVisible?'eye-off-outline':'eye'" size="18" ></uv-icon>
								</template>
							</uv-input>
						</uv-form-item>
						<uv-form-item labelWidth='300rpx' :label="$t('login.confirm')" prop="passwordTow" borderBottom >
							<uv-input v-model="state.passwordTow"  :placeholder="$t('login.password')" :type='state.passwordVisible?"text":"password"' border="none">
								<template #suffix>
									
									<uv-icon @click="state.passwordVisible = !state.passwordVisible" :name="state.passwordVisible?'eye-off-outline':'eye'" size="18" ></uv-icon>
								</template>
							</uv-input>
						</uv-form-item>
						<uv-form-item :label="$t('login.code')" prop="code" borderBottom >
							<uv-input v-model="state.code"  :placeholder="$t('login.code')" border="none">
							</uv-input>
							<template #right>
								<uv-button size="small" type="primary" @click="send">{{ count ? count+'S' : $t("login.send") }}</uv-button>
							</template>
						</uv-form-item>
						<view>
							<uv-button shape="circle" block type="primary" @click="onSubmit">{{ $t("login.change") }}</uv-button>
								<view class="goLogin" @click="goLogin">
									{{ $t("login.toLogin") }}
								</view>
						</view>
			</uv-form>
			</view>
			
			<!-- <van-form class="form" @submit="onSubmit" ref='formRef'>
				<van-cell-group inset>
					<van-field v-model="state.username" name="account" label="account" placeholder="account"
						:rules="[{ required: true, message: 'Please input' }]" />
					<van-field v-model="state.password" type="password" name="password" label="password"
						:right-icon="state.passwordVisible ? 'eye-o' : 'eye-off-o'" placeholder="password"
						:rules="[{ required: true, message: 'Please input' }]" />
					<van-field
						v-model="state.passwordTow"
						type="password"
						name="passwordTow"
						label="confirm password"
								:right-icon="state.passwordVisible ? 'eye-o' : 'eye-off-o'"
						placeholder="password"
						:rules="[{ required: true, message: 'Please input' },{ validator: passwordIsSame, message: 'The password is different.' }]"
						/>
					<van-field v-model="state.code" name="code" label="code" placeholder="code"
						:rules="[{ required: true, message: 'Please input' }]">
						<template #button>
							<van-button size="small" type="primary" @click="send">{{count? count+'S' : 'SEND'}}</van-button>
						</template>
					</van-field>
				<div>
					<van-button round block type="primary" native-type="submit">
						change
					</van-button>
					<view class="goLogin" @click="goLogin">
						LOGIN AN ACCOUNT
					</view>
				</div>
				</van-cell-group>
			</van-form> -->
		</view>
	</view>
</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onTabItemTap
	} from '/utils/common.js'
	import {
		useLoginApi
	} from '@/Apis/login.js';
	import { useCountDown } from "@/hooks/index";
	import { navigateBack } from '@/utils/common.js'
	import navBar from '@/components/navBar.vue'
	// 主题色配置
	import { useMainStore } from "@/store/index.js";
	const { themeInfo } = useMainStore();
	const formRef = ref()
	const { count, countDown,cancelCout } = useCountDown();
	const getApi = useLoginApi()
	// 国际化配置
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();
	const passwordIsSame = ()=> state.value.password === state.value.passwordTow
	const state = ref({
		codeImage: '',
		username: '',
		uuid: '',
		code: '',
		password: '',
		passwordTow:'',
		passwordVisible: false,
	})
	const rules = {
		username:[{ required: true, message: t("login.input"), trigger: ['blur', 'change'] }],
		password:[{ required: true, message: t("login.input"), trigger: ['blur', 'change']}],
		passwordTow:[{ required: true, message: t("login.input"), trigger: ['blur', 'change']}, { validator: passwordIsSame, message: t("login.different"), trigger: ['blur', 'change']}],
		code:[{ required: true, message: t("login.input"), trigger: ['blur', 'change']}],
	}
	const togglePasswordVisibility = () => {
		state.value.passwordVisible = !state.value.passwordVisible
	};
	const goLogin = ()=>{
		navigateBack('/pages/login/index')
	}
	const send = () => {
		formRef.value.validateField(['username','password','passwordTow'],vaild=>{
			if(!vaild.length){
				countDown(30,()=>{
				  ForgotPassword()
				})
			}
		})
	}

	const ForgotPassword = () => {
		uni.showLoading()
		getApi.ForgotPassword(`"${state.value.username}"`).then(res => {
			uni.hideLoading()
			if (res.code === 200) {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}else{
				cancelCout()
			}
		})
	}
	const EmailVerify = () => {
		uni.showLoading()
		getApi.EmailVerify({
			emailAddress: state.value.username,
			verifyCode: state.value.code,
		}).then(res => {
			uni.hideLoading()
			if (res.code === 200) {
				UpdateUserInfo()
			} else {
			}
		})
	}

	const UpdateUserInfo = () => {
		uni.showLoading()
		getApi.UpdateUserInfo({
			emailAddress: state.value.username,
			password: state.value.password,
			type: 0,
		}).then(res => {
			uni.hideLoading()
			if (res.code === 200) {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				goLogin()
			} else {
			}
		})
	}
	const onSubmit = (values) => {
		formRef.value.validate().then(()=>{
			EmailVerify()
		})
		
	};
	
</script>

<style scoped lang="scss">
	@import '@/static/style/theme.scss';
	.forgot-wrap {
		background: linear-gradient(0deg, var(--left-linear) 0%, var(--right-linear) 94.004%);
		height: 100vh;
	}

	.container {
		padding: 20rpx;
		font-size: 14px;
		line-height: 24px;
		min-width: 100%;

		.logoBox {
			margin-top: 6%;
			padding: 40upx;
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-weight: 900;
			font-size: 34rpx;

			image {
				margin-top: 20rpx;
				width: 256rpx;
				height: 63rpx;
			}
		}

		.formBox {

			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			padding: 0 20rpx;

			.form {
				background: #FFFFFF;
				padding: 60rpx 20rpx;
				border-radius: 24rpx 24rpx 0 0;

				.goLogin {
					text-align: center;
					padding: 30rpx 0;
				}
				::v-deep .uv-form-item__body{
					margin-bottom: 25rpx;
					background-color: #F6F7F9;
					overflow: visible;
					padding: 10px 16px;
					.uv-form-item__body__left{
						width: auto;
						min-width: 140rpx;
						flex-wrap: nowrap;
						color: #617986;
						font-weight: 600;
						white-space: nowrap;
						display: flex;
						align-items: center;
					}
				}
			// ::v-deep .van-field{
			// 		margin-bottom: 25rpx;
			// 		background-color: #F6F7F9;
			// 		overflow: visible;
			// 		.van-field__label{
			// 			width: auto;
			// 			min-width: 120rpx;
			// 			flex-wrap: nowrap;
			// 			color: #617986;
			// 			font-weight: 600;
			// 			white-space: nowrap;
			// 			display: flex;
			// 			align-items: center;
			// 		}
			// 		.van-field__error-message{
			// 			position: absolute;
			// 			top: 40rpx;
			// 		}
			// 		.van-field__value{
			// 			position: relative;
			// 		}
			// 		.van-field__control{
			// 			color: #121819;
			// 			font-weight: 600;
						
			// 		}
			// 		.van-field__button {
			// 			.van-button {
			// 			height: 50rpx;
			// 			}
			// 		}
			// 	}
			}

			::v-deep .uv-button {
				border-color: var(--btn-color5);
				background-color: var(--btn-color5);
			}
		}
	}
	.code {
		width: 140rpx;
		height: 56rpx;
	}
</style>