<template>
	<view class="content">
		<image class="returnBack" src="/static/login/returnBack.png" @click="goBack()"></image>
		<image class="logo" src="/static/login/register.png"></image>
		<view class="text-area">
			<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
				<uni-forms-item name="username" required label="用户名">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.username"
						placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="phone" required label="手机号">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone"
						placeholder="请输入手机号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="school" required label="学校">
					<uni-combox :candidates="candidates" placeholder="请选择学校" v-model="formData.school"></uni-combox>
				</uni-forms-item>
				<uni-forms-item name="gender" required label="性别">
					<uni-data-checkbox v-model="formData.gender" :localdata="range"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item name="password" required label="密码">
					<uni-easyinput type="password" placeholder="输入密码" v-model="formData.password"
						prefix-icon="el-icon-lock"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="checkPassword" required label="确认">
					<uni-easyinput type="password" placeholder="确认密码" v-model="formData.checkPassword"
						prefix-icon="el-icon-lock"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item class="btn-form">
					<button class="loginButton" @click="register('form')">注册</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- <helang-tab-bar-bubble :fixed-bottom="true"></helang-tab-bar-bubble> -->
	</view>
</template>

<script>
	import tabBarBubble from "@/components/helang-tabBar/tab-bar-bubble"
	export default {
		name: 'register',
		components: {
			"helang-tab-bar-bubble": tabBarBubble
		},
		data() {
			return {
				range: [{
					"value": '男',
					"text": '男'
				}, {
					"value": '女',
					"text": '女'
				}],
				candidates: ['福州大学'],
				formData: {
					username: '',
					phone: '',
					school: '',
					gender: '',
					password: '',
					checkPassword: ''
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/
								if (reg.test(value)) {
									callback()
								} else {
									callback('请输入正确的手机号')
								}
							}
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length > 20 || value.length < 8) {
									callback('密码长度在8-20位！')
								} else {
									callback();
								}
							}
						}]
					},
					checkPassword: {
						rules: [{
							required: true,
							errorMessage: '请再次输入密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value !== data.password) {
									callback('两次输入密码不一致!')
								} else {
									callback()
								}
							}
						}]
					}
				}
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			// 提交表单
			register(validateForm) {
				this.$refs[validateForm].validate(valid => {
					if (!valid) {
						uniCloud.callFunction({
								name: 'fe-register',
								data: {
									username: this.formData.username,
									phone: this.formData.phone,
									gender: this.formData.gender,
									school: this.formData.school,
									password: this.formData.password
								}
							})
							.then(res => {
								console.log(res)
								if (res.result.code === 200) {
									uni.showToast({
										title: '注册成功',
										icon: 'success'
									})
									uni.reLaunch({
										url: '/pages/login/login',
										animationType: 'pop-in',
										animationDuration: 300
									})
								} else {
									uni.showToast({
										title: '手机号已存在',
										icon: 'error'
									})
								}
							});
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		position: absolute;
		background-color: #edeef0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 50rpx;
		margin-left: 25rpx;
		margin-right: auto;
	}

	.logo {
		height: 450rpx;
		width: 500rpx;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.loginButton {
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 20px;
		margin-top: 8px;
		margin-bottom: 15px;
	}

	.loginButton::after {
		border: 0;
	}

	.text-area {
		display: flex;
		justify-content: center;
		width: 90%;
	}
</style>