<template>
	<div class="register cm-layout" :style="'background-image:url('+ Background +');'">
		
		<div class="logo-place">
			<div class="logo-title">华菱植物工厂系统</div>
			<div class="reg-place">
				<div class="inbox-range">
					<div class="ctn-fix">
						<el-form ref="regForm" :inline="true" :model="regForm" :rules="rules" label-position="left" label-width="66px" class="login-form">
							<h3 class="title">用户注册</h3>
							<el-form-item label="用户名" prop="username">
							  <el-input v-model="regForm.username" placeholder="用户名" />
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input v-model="regForm.password" type="password" placeholder="密码" style="width:180px">
								  <svg-icon slot="prefix" icon-class="password" />
								</el-input>
							</el-form-item>
							<el-form-item label="电话" prop="phone">
							  <el-input v-model.number="regForm.phone" placeholder="电话" />
							</el-form-item>
							<el-form-item label="昵称">
							  <el-input v-model="regForm.nickName" placeholder="昵称" />
							</el-form-item>
							<!-- <el-form-item label="邮箱" prop="email">
							  <el-input v-model="regForm.email" placeholder="邮箱"/>
							</el-form-item>
							<el-form-item label="性别">
							  <el-radio-group v-model="regForm.gender" style="width: 130px">
								<el-radio label="男">男</el-radio>
								<el-radio label="女">女</el-radio>
							  </el-radio-group>
							</el-form-item> -->
							<el-form-item label="验证码" prop="captcha">
								<div class="ctn-place" style="width:400px">
									<el-input v-model="regForm.captcha" placeholder="验证码">
										<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
									</el-input>
									<div class="login-code">
										<img :src="imgCode" style="width: 120px;height: 35px;cursor: pointer;margin-left:50px;" @click="getCode"/>
									</div>
								</div>
							</el-form-item>
							<div style="text-align:right;font-size:13px;color:#46A6FF;">
								<a href="/login">去登录</a>
							</div>
							<el-form-item style="width:100%;" class="item-login">
								<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin()">
								  <span v-if="!loading">注 册</span>
								  <span v-else>注 册 中...</span>
								</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import store from '@/store'
import Background from '@/assets/images/background.png';
import { encrypt } from '@/utils/rsaEncrypt'
import { isvalidPhone } from '@/utils/validate'
import { getCodeImg } from '@/api/login'
import { register } from '@/api/system/user'

export default {
	name: 'Register',
	data() {
		// 自定义验证
		const validPhone = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请输入电话号码'))
			} else if (!isvalidPhone(value)) {
				callback(new Error('请输入正确的11位手机号码'))
			} else {
				callback()
			}
		}

		return {
			Background: Background,
			loading: false,
			imgCode:'',
			regForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: {id:6}, phone: null },
			rules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
				],
				password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
				nickName: [
					{ required: true, message: '请输入用户昵称', trigger: 'blur' },
					{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
				],
				phone: [
					{ required: true, trigger: 'blur', validator: validPhone }
				],
				captcha: [
					{ required: true, message: '请输入验证码', trigger: 'blur'}
					//{ min: 4, max: 4, message:'验证码长度在 4 个字符', trigger: 'blur' }
				]
			},
		}
	},

	created() {
		// 获取验证码
		this.getCode()
	},
	methods: {
		handleLogin() {
			this.$refs.regForm.validate(valid => {
				if(valid) {
					this.loading = true;
					this.regForm.password = encrypt(this.regForm.password);

					let resultObj = {};

					resultObj.authUser = {};
					resultObj.authUser.uuid = this.regForm.uuid;
					resultObj.authUser.code = this.regForm.captcha;

					resultObj.userDto = {};
					resultObj.userDto.username = this.regForm.username;
					resultObj.userDto.password = this.regForm.password;
					resultObj.userDto.nickName = this.regForm.nickName;
					resultObj.userDto.phone = this.regForm.phone;
					resultObj.userDto.deptId = 6;
					resultObj.userDto.enabled = 0;
					resultObj.userDto.email =  this.regForm.username + '@default.com';
					resultObj.userDto.roles = [{id:2}];
					resultObj.userDto.jobs = [{id:10}];
					register(resultObj).then((res) => {
						if(res.status != '400'){
							this.$notify({
								title: '提示',
								message: '注册成功，等待管理员激活！',
								type: 'success',
								duration: 5000
							});
						}
						this.regForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: {id:6}, phone: null };
						this.loading = false;
					})
				}else{
					console.log('error submit!!')
					return false
				}
			})
		},
		getCode() {
			getCodeImg().then(res => {
				this.imgCode = res.img;
				this.regForm.uuid = res.uuid;
			})
		},

	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.register {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background-size: cover;

		.logo-place{position:absolute;top:22.018vh;left:49.843vw;width:40.937vw;justify-content:center;}
		.reg-place{
			flex:1;display:flex;/* width:24.166vw; */min-width:616px;margin:4.537vh auto 0;align-items:center;
			background:no-repeat top center url('~@/assets/images/layout/login_banel.png');background-size:100% 100%;

			.inbox-range{flex:1;margin:4.629vh 45px;}
			.login-form {
				/* width: 580px; */
				.item-login{
					margin-top:20px;
					>:first-child{
						display:block;
					}
				}
				.input-icon{
					height: 34px;width: 14px;margin-left: 2px;
				}

				.el-form-item:last-child{margin-bottom:0}

				.title {
					margin: 0 auto 2.222vh;
					text-align: center;
					color: #01d6fe;
					letter-spacing: 8px;
					text-indent: 4px;
				}

				.el-input{
					height: 38px;
					input{background-color:#1042a1 !important;color:#fff;border-color:#085fa2;}
				}
			}
		}
		
		.logo-title{
			color:#fff;font-size:5.448vh;text-align:center;cursor:default;
		}

		.login-code{
			margin:0 0 5px 20px;
			:not(rect){
				display:block !important;
			}
		}
	}
</style>
