<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import BasicLayout from "@/layouts/BasicLayout.vue";
import "./index.css"
import PostForm from "@/components/form/PostForm.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TButton from "@/components/ui/TButton.vue";
import TInputIcon from "@/components/ui/TInputIcon.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<BasicLayout>
		<div class="form-box">
			<PostForm action="$" @before="ctx.submitBefore" @done="ctx.submitDone" @success="ctx.submitSuccess" autocomplete="off">
				<input type="hidden" name="token" v-model="ctx.token"/>
				<div class="flex flex-col gap-3">
					<div class="ui header">
						<h6>注册{{ ctx.systemName }}</h6>
					</div>
					<div class="ui field">
						<p class="comment">用户名 *（长度不小于6位，只能包含英文字母、数字、下划线）：</p>
						<TInputIcon beginIcon="pi pi-user">
							<TInputText name="username" v-model="ctx.username" placeholder="请输入用户名" maxlength="200" class="w-full" autofocus/>
						</TInputIcon>
					</div>
					<div class="ui field">
						<p class="comment">登录密码 *（长度不小于6位<span v-if="ctx.complexPassword">，且必须包含大写字母和小写字母</span>）：
						</p>
						<TInputIcon beginIcon="pi pi-lock">
							<TInputText type="password" name="password" v-model="ctx.password" placeholder="请输入密码" maxlength="100" @input="ctx.changePassword()" class="w-full"/>
						</TInputIcon>
					</div>
					<div class="ui field">
						<p class="comment">确认密码 *：</p>
						<TInputIcon beginIcon="pi pi-lock">
							<TInputText type="password" name="password2" placeholder="请再次输入密码" maxlength="200" class="w-full"/>
						</TInputIcon>
					</div>
					<div class="ui field">
						<p class="comment">手机号 *：</p>
						<div class="ui input">
							<TInputText name="mobile" maxlength="11" placeholder="手机号" class="w-full"/>
						</div>
					</div>
					<div class="ui field">
						<p class="comment">常用电子邮箱 *：</p>
						<div class="ui input">
							<TInputText name="email" maxlength="100" placeholder="常用电子邮箱" class="w-full"/>
						</div>
					</div>
					<div class="ui field">
						<p class="comment">用户姓名或者公司名称 *:</p>
						<div class="ui input">
							<TInputText name="fullname" maxlength="50" placeholder="用户姓名或者公司名称" class="w-full"/>
						</div>
					</div>

					<div class="mt-4">
						<TButton class="w-full" type="submit" v-if="!ctx.isSubmitting">注册</TButton>
						<TButton disabled class="w-full" type="submit" v-if="ctx.isSubmitting">注册中...</TButton>
					</div>

					<div class="register-box">
						<a href="/login" class="link">已有账号，去登录 &raquo;</a>
					</div>
				</div>
			</PostForm>
		</div>
	</BasicLayout>
</template>

<style lang="postcss" scoped>
</style>