<!-- 注册页面 -->
<template>
	<view class="register">
		<view class="main">
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				labelWidth="100"
				ref="form">
				<u-form-item label="用户名" prop="name" borderBottom :required="true">
					<u--input
						placeholder="请输入用户名"
						v-model="form.name"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="电子邮箱" prop="email" borderBottom :required="true">
					<u--input
						placeholder="请输入电子邮箱"
						v-model="form.email"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="密码" prop="password" borderBottom :required="true">
					<u--input
						placeholder="请输入密码"
						v-model="form.password"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="确认密码" prop="confirmPassword" borderBottom :required="true">
					<u--input
						placeholder="请输入确认密码"
						v-model="form.confirmPassword"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="手机号" prop="phone" borderBottom :required="true">
					<u--input
						placeholder="请输入手机号"
						v-model="form.phone"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="验证码" prop="code" borderBottom :required="true">
					<u--input
						placeholder="验证码"
						v-model="form.code"
						border="none"
					></u--input>
					<!-- <view class="code-img-wrapper" @click="updateImageCode">
					  <canvas style="width: 280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
					</view> -->
					<!-- <image :src="canvasImgUrl" style="width: 140px;height: 80px;" @click="updateImageCode"></image> -->
					 <image :src="codeUrl" style="width: 140px;height: 60px;"@click="updateImageCode"></image>
				</u-form-item>
			</u--form>
		</view>
		<view class="button-bottom">
			<view class="button button-left" @click="register">立即注册</view>
			<view class="button button-right" @click="clear">清空</view>
		</view>
		<Message 
			:show="showMessage" 
			title="注册须知" 
			:content="messageContent" 
			@cancel="cancel"
			@close="close"
			@refuse="refuse"
		/>
		<canvas style="position: fixed;left: -100000px;280rpx;height: 140rpx;" canvas-id="canvas"></canvas>
	</view>
</template>

<script>
	import Message from '../../components/base/message.vue';
	// import { Mcaptcha  } from '../../common/mcaptcha.js';
	import { createCanvas, validateCode } from '../../common/createCanvas.js';
	// import validate from '../../common/createCanvas.js';
	import { registerUser } from '../../api/mine.js'
	export default {
		components: {
			Message
		},
		data() {
			return {
				timeStr: '', // 验证码时间戳
				codeUrl: '', // 验证码图片
				canvasImgUrl: '',
				showMessage: false, //注册须知弹框显隐
				messageContent: '依法打击网上有害不良信息，事关国家安全、民族团结、社会稳定、事关人民群众根本利益。\n\n举报中心欢迎广大网民积极举报网上有害不良信息，对举报有功人员继续给予奖励，对提供重大线索、为打击暴恐犯罪发挥重要作用的举报有功人员最高给予10万元奖励。',
				form: {
					name: '',  //用户名
					email: '', //电子邮箱
					password: '', //密码
					confirmPassword: '', //确认密码
					phone: '', //手机号
					code: '', //验证码
				},
				rules: {
					// 用户名
					'name': [
						{
							type: 'string',
							required: true,
							message: '请填写用户名',
							trigger: ['blur', 'change']
						},
					],
					'email': [
						{
							required: true, 
							message: '请输入电子邮箱',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.email(value);
							},
							message: '请输入正确的电子邮箱',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					// 密码规则
					'password': [
						{
							type: 'string',
							required: true,
							message: '请填写新密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
					],
					// 确认密码规则
					'confirmPassword': [
						{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
						// 自定义规则判断是否包含字母"A"
						{
							validator: (rule, value, callback) => {
								console.log('---', value, this.form.password)
								if(value + '' === this.form.password + '') {
									console.log('true')
									return true;
								}
								callback(new Error('密码不一致'));
							}
						},
					],
					// 手机号验证规则
					'phone': [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确的手机号',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					// 验证码规则
					'code': [
						{
							type: 'string',
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// let validate = this.mcaptcha.validate(value)
								let validate = validateCode(value);
								if(validate) {
									return true
								}
								callback(new Error('验证码错误'));
							},
						}
					],
				},
			}
		},
		onShow() {
			this.showMessage = true;
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
			// this.mcaptcha = new Mcaptcha({
			// 	el: 'canvas',
			// 	width: 140,
			// 	height: 80,
			// 	createCodeImg: "",
			// });
			// createCanvas({
			// 	el: 'canvas',
			// 	width: 140,
			// 	height: 80,
			// 	createCodeImg: "",
			// }, this).then(res => {
			// 	this.canvasImgUrl = res;
			// 	console.log('绘画')
			// })
			this.fetchCodeURl() // 获取验证码
		},
		methods: {
			// 立即注册
			register() {
				this.$refs.form.validate().then(res => {
					// uni.$u.toast('注册成功')
					// setTimeout(() => {
					// 	wx.navigateBack({
					// 	  delta: 1
					// 	})
					// }, 2000)
					//注册
					const data = {
						'userInfoVo.account': this.form.name, //用户名(必填）
						'userInfoVo.name':'',
						'userInfoVo.sex':'',
						'userInfoVo.nation':'',
						'userInfoVo.idCard':'',
						'userInfoVo.phone':this.form.phone, //手机号(必填）
						'userInfoVo.email': this.form.email, //电子邮箱(必填）
						'userInfoVo.country': '中国',
						'userInfoVo.province': '',
						'userInfoVo.city': '',
						'userInfoVo.county': '',
						'userInfoVo.address': '',
						'userInfoVo.verifyCode':this.form.code, // 验证码(必填）
						'userInfoVo.password':this.form.password,  //(必填MD5加密）(必填MD5加密）
						'userInfoVo.accountType':1, // 默认值1（普通账号）(必填）
						'timeStr':new Date().getTime(), //时间戳（必填）
						'token':''

					}
					// registerUser(data).then(res => {
					// 	console.log(res, '注册结果')
					// }).catch((error) => {
					// 	console.log(error)
					// })
					// 模拟注册成功
					const userInfo = {
						id:'用户ID', 
						account:'用户账号',
						name:'姓名',
						sex:'性别',
						nation:'民族', 
						IDCard:'身份证号',
						phone:'手机号码', 
						email:'电子邮箱',
						country:'国家', 
						province:'省', 
						city:'市', 
						county:'县', 
						address:'详细地址', 
						regTime:'注册时间'}
				    wx.setStorageSync('userInfoxj', userInfo)
					wx.switchTab({
						url:'/pages/mine/mine'
					})
				}).catch(errors => {
					console.log(errors, 'errors')
					uni.$u.toast('请将信息填写完整')
				})
			},
			//点击清空
			clear() {
				// this.$refs.form.resetFields();
				this.form.name = '';
				this.form.email = '';
				this.form.password = '';
				this.form.confirmPassword = '';
				this.form.phone = '';
				this.form.code = '';
				this.$refs.form.clearValidate();
			},
			// 换验证码
			updateImageCode() {
				this.fetchCodeURl()
			},
			// 获取验证码
			fetchCodeURl() {
				var that = this
				that.timeStr = new Date().getTime()
				wx.request({
				  url: 'https://www.xjwljb.com/webserver/captchaController/generateVerifyCodeOfReport.do',
				  method: 'GET',
					data: {
						timeStr: that.timeStr
					},
				  success(res) {
						if(res.statusCode === 200) {
							that.codeUrl = res.data
						}
				  },
				  fail(err) {
						console.log('fail', err)
				    reject(err);
				  },
				});
			},
			// // 刷新验证码
			// updateImageCode() {
			//   // this.mcaptcha.refresh();
			// 	createCanvas({
			// 		el: 'canvas',
			// 		width: 140,
			// 		height: 80,
			// 		createCodeImg: "",
			// 	}, this).then(res => {
			// 		this.canvasImgUrl = res;
			// 		console.log('绘画')
			// 	})
			// },
			//拒绝注册须知, 返回上一页
			refuse(val) {
				wx.navigateBack()
			},
			close(val) {
				this.showMessage = val;
			}
		} 
	}
</script>

<style lang="scss" scoped>
	.register {
		width: 100%;
		height: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(#bed5fe 0%, #eef1fd 100%);
		.guiCode {
		    width: calc(70vmin / 3.75);
		    height: 100%;
		}
		.main {
			padding: 20rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
			// .code-img-wrapper {
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// }
		}
		.button {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			color: #fff;
			font-weight: 600;
			letter-spacing: 4rpx;
			background-color: #408bf6;
			border: 2rpx solid #408bf6;
			border-radius: 10rpx;
			margin: 64rpx 0 32rpx 0;
			white-space: nowrap;
			box-sizing: border-box;
			&:active {
				background-color: #fff;
				color: #408bf6;
			}
		}
		.button-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			margin-top: 60rpx;
			.button-left {
				width: fit-content;
				padding: 20rpx 40rpx;
				margin-top: 0;
			}
			.button-right {
				width: fit-content;
				padding: 20rpx 40rpx;
				margin-top: 0;
				color: #0043ac;
				background-color: #fff;
				border: 2rpx solid #0043ac;
			}
		}
	}
</style>
<style lang="scss">
	.register { 
		.u-form-item__body__left__content__label {
			white-space: nowrap;
			font-weight: 600;
		}
		.u-form-item__body__right__content__slot {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
		.u-form-item {
			margin-bottom: 20rpx;
		}
	}
</style>