<template>
	<view class="register-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.registered") }}</uv-button>
									<view class="goLogin" @click="goLogin">
										{{ $t("login.toLogin") }}
									</view>
							</view>
				</uv-form>
				</view>
			<!-- 	<van-form class="form" @submit="onSubmit" ref='fromRef'>
					<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">
							registered
						</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 {
		navigateBack
	} from '@/utils/common.js'
	import {
		useCountDown
	} from "@/hooks/index";
	import navBar from '@/components/navBar.vue'
	// 主题色配置
	import { useMainStore } from "@/store/index.js";
	const { themeInfo } = useMainStore();
	// 国际化配置
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();
	const state = ref({
		codeImage: '',
		username: '',
		uuid: '',
		code: '',
		password: '',
		passwordTow: '',
		passwordVisible: false,
	})
	
	const passwordIsSame = () => state.value.password === state.value.passwordTow
	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 getApi = useLoginApi()
	const {
		count,
		countDown,
		cancelCout
	} = useCountDown();
	const formRef = ref()
	
	
	const togglePasswordVisibility = () => {
		state.value.passwordVisible = !state.value.passwordVisible
	};
	const goLogin = () => {
		navigateBack('/pages/login/index')
	}
	const ForgotPassword = () => {
		getApi.ForgotPassword(`"${state.value.username}"`).then(res => {
			console.log(res)
			if (res.code === 200) {

			}
		})
	}
	const EmailVerify = () => {
		uni.showLoading()
		getApi.EmailVerify({
			emailAddress: state.value.username,
			verifyCode: state.value.code,
		}).then(res => {
			uni.hideLoading()
			if (res.code === 200) {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				navigateBack('/pages/login/index')
			}
		})
	}
	const send = () => {
		Register()
	}

	const Register = () => {
		formRef.value.validateField(['username', 'password', 'passwordTow'],vaild => {
			if (!vaild.length) {
				uni.showLoading()
				getApi.Register({
					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'
						})
					} else {

					}
				})
			}
		})

	}
	const onSubmit = (values) => {
		formRef.value.validate().then(res=>{
				EmailVerify()
		})
	};
</script>

<style scoped lang="scss">
	@import '@/static/style/theme.scss';
	.register-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>