<template>
	<view class="login-page">
		<view class="banner">
			<image :src="banner" style="width: 100%;height: 500rpx;" mode="aspectFill"></image>
		</view>
		<view class="form tn-m-lg tn-p-xl tn-border tn-gray-disabled_border tn-radius tn-shadow tn-shadow-md">
			<view class="title tn-text-2xl tn-text-center tn-grey-dark_text tn-pb-lg tn-pt-lg">
				用户注册
			</view>
			<tn-form ref="formRef" :model="formData" :rules="formRules">
			    <tn-form-item  prop="username" class="tn-pt-sm tn-pb-sm">
			      <tn-input v-model="formData.username" type="text" underline placeholder="请输入用户名"/>
				  <template #label>
					  <tn-icon size="40rpx" color="tn-grey-light" name="my"/>		
				  </template>
			    </tn-form-item>
				<tn-form-item prop="password" class="tn-pt-sm tn-pb-sm">
				  <tn-input v-model="formData.password" type="password" underline placeholder="请输入密码" />
				  <template #label>
				  		<tn-icon size="40rpx" color="tn-grey-light" name="lock"/>			  
				  </template>
				</tn-form-item>
				<tn-form-item prop="repassword" class="tn-pt-sm tn-pb-sm">
				  <tn-input v-model="formData.repassword" type="password" underline placeholder="请输入确认密码" />
				  <template #label>
				  		<tn-icon size="40rpx" color="tn-grey-light" name="lock"/>			  
				  </template>
				</tn-form-item>
			</tn-form>
			<view class="tn-mt tn-pt-xl tn-pb-xl">
				<view class="tn-flex-center tn-m-sm">
					<tn-button size="lg" @click="submitForm" shape="round" width="400"> 注 册 </tn-button>
				</view>
				<view class="tn-text-center tn-grey-dark_text tn-text-xs tn-aquablue-dark_text tn-p-sm
" @click="toRegister">
					已有账号？登录&gt;&gt;
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue';
	import type { FormRules, TnFormInstance } from '@tuniao/tnui-vue3-uniapp'

	const banner = ref('https://resource.tuniaokj.com/images/swiper/ad1.jpg')
	const formRef = ref<TnFormInstance>()
	
	const formData = reactive<{
		username:string,
		password:string,
		repassword:string
	}>({
		username:'',
		password:'',
		repassword:''
	})
	
	const formRules: FormRules = {
	  username: [
	    { required: true, message: '请输入用户名', trigger: 'blur'},
	    {
			min: 3,
			max: 10,
	        message: '长度在 3 到 10 个字符',
	        trigger: 'blur'
	    },
	  ],
	  password:[
		  {required: true, message: '请输入密码', trigger: 'blur'},
		  {
		    pattern: /^[\w-]{4,16}$/,
		    message: '请输入4-16位英文、数字、下划线、横线',
		    trigger: ['change', 'blur'],
		  },
	  ],
	  repassword:[
	  		{required: true, message: '请输入密码', trigger: 'blur'},
	  ]
	}
	
	const toRegister = () => {
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
	
	const submitForm = () => {
		if(formData.repassword != formData.password){
			uni.showToast({
				icon:'none',
				title:'确认密码不一致',
				success: () => {
					formData.repassword = ''
				}
			})
			return
		}
		formRef.value?.validate((valid) => {
		    if (valid) {
				console.log(formData)
		      uni.showToast({
		        title: '提交成功',
		      })
		    } else {
		      uni.showToast({
		        title: '表单校验失败',
		        icon: 'none',
		      })
		    }
		})
	}
</script>

<style lang="scss" scoped>
	.banner{
		position: relative;
		left: -25%;
		width: 150%;
		border-radius: 0 0 50% 50%;
	}
	.form{
		border-radius: 1em;
		position: relative;
		top: -150rpx;
		background-color: #fff;
	}
</style>