<template>
	<view>
        <view class="logo">
			<view class="img">
				<image mode="widthFix" src="../../static/img/cycLogoImg.jpg"></image>
			</view>
		</view>
		<view class="form re">
			<view class="username">
				<input placeholder="请输入用户账号(登录账号)" v-model="userName" @blur="nameSearch" @input="nameSearch"  placeholder-style="color: rgba(255,255,255,0.8);"/>
				<text v-if="!unique" class="nameAlready">用户名已存在</text>
			</view>
			<view class="username">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="code">
				<input placeholder="请输入验证码" v-model="code" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="password">
				<input placeholder="请输入密码(登录密码)" v-model="password" password=true placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="btn" @tap="doReg">立即注册</view>
			<view class="res">
				<view @tap="toLogin">已有账号立即登录</view>
			</view>
			<view class="wechartRegister">
				<button id="wxRegister"  open-type="getUserInfo" @getuserinfo="weChartReg">
					<image src="../../static/img/share/wechart.png" class="wechartRegisterImg"></image>
				</button>
				
				<view class="wechartRegisterText">微信一键注册</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				userName:"",
				code:'',
				password:"",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#ffffff",
				getCodeisWaiting:false,
				unique:true,
				nickname:'',
				code:''
			}
		},
		onLoad() {

		},
		methods: {
			Timer(){},
			//获取验证码
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"
				//示例用定时器模拟请求效果
				setTimeout(()=>{
					uni.showToast({title: '验证码已发送',icon:"none"});
					//示例默认1234，生产中请删除这一句。
					// this.code=1234;
					this.$u.api.getCode(this.phoneNumber).then(res=>{
						debugger;
						if(res.code===0){}else{}
					})
					this.setTimer();
				},1000)
			},
			//定时器
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			//验证用户名
			nameSearch(){
				let params = {username:this.userName};
				this.$u.api.checkUserName(params).then(res=>{
					if(res.code===0){
						if(res.data==='true'){
							this.unique = false;
						}else{
							this.unique = true;
						}
						debugger;
						console.log(res)
					}else{}
				})
			},
			//微信一键注册
			weChartReg(){
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(modelRes) {
						//如果用户点击了确定按钮
						if (modelRes.confirm) {
							uni.getUserProfile({
								desc: '获取你的昵称',
								success: profileRes => {
									that.nickName = profileRes.userInfo.nickName;
									uni.login({
									  provider: 'weixin',
									  success: function (wxLoginRes) {
										  debugger;
										  console.log(wxLoginRes.code)
										  that.code = wxLoginRes.code;
											let params = {nickname:that.nickName,code:wxLoginRes.code};
											that.$u.api.wxReg(params).then(wxRegRes=>{
												uni.hideLoading();
												if(wxRegRes.code==0){
													uni.showToast({
														title: '注册成功',
														icon: "success"
													});
													uni.login({
													  provider: 'weixin',
													  success: function (ress) {
														  that.$u.api.login({
														  	code: ress.code
														  }).then(
														  	res => {
														  		that.$u.vuex('vuex_token', res.data.token)
														  		that.$u.api.getInfo().then(res => {
														  			that.$u.vuex('vuex_user', res.data)
														  			if(res.data.icon===""){
														  				that.$u.vuex('vuex_user.icon', '/static/img/face.jpg')
														  			}else{
														  				that.$u.vuex('vuex_user.icon', that.vuex_host + 'public/' + res.data.icon)
														  			}
																	uni.reLaunch({
																		url:'/pages/tabBar/home/home'
																	})
														  		})
														  		uni.hideLoading()
														  	}
														  ).catch(res=>{
														  	  uni.redirectTo({
														  		url:'/pages/login/login'
														  	  })
														  })
														  },
												    })	
												}else{
													uni.showToast({
														title: infoRes.data.msg,
														icon:'none'
													});
												}
											})
										},
									})
								},
								fail: res => {
									console.log(2);
									console.log(res)
									//拒绝授权
									uni.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
									return;
								}
							});
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							console.log(3);
							uni.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 2000
							});
							return;
						}
					}
				});
			},
			//注册
			doReg(){
				let that = this;
				if(that.unique){
					uni.hideKeyboard()
					//模板示例部分验证规则
					if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phoneNumber))){ 
						uni.showToast({title: '请填写正确手机号码',icon:"none"});
						return false; 
					} 
					uni.showLoading({
						title: '提交中...'
					})
					uni.login({
					  provider: 'weixin',
					  success: function (wxLoginRes) {
							let params = {username:that.userName,mobphone:that.phoneNumber,code:wxLoginRes.code,phone_code:that.code,password:that.password};
							that.$u.api.register(params).then(registerRes=>{
								uni.hideLoading();
								debugger;
								if(registerRes.code===0){
									that.toLogin();
								}else{}
							})
						},
					})
					
				}else{
					uni.showToast({title: '用户名已存在，请重新选择用户名',icon:"none"});
				}
				//模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
			// 	setTimeout(()=>{
			// 		uni.getStorage({
			// 			key: 'UserList', 
			// 			success:(res)=>{
			// 				//增加记录，密码md5
			// 				res.data.push({username:this.phoneNumber,password:md5(this.password)})
			// 				uni.setStorage({
			// 					key: 'UserList',
			// 					data: res.data,
			// 					success: function () {
			// 						uni.hideLoading()
			// 						uni.showToast({title: '注册成功',icon:"success"});
			// 						setTimeout(function(){
			// 							uni.navigateBack();
			// 						},1000)
			// 					}
			// 				});
			// 			},
			// 			fail:(e)=>{
			// 				uni.hideLoading()
			// 				console.log('error');
			// 				//新建UserList
			// 				uni.setStorage({
			// 					key: 'UserList',
			// 					data: [{username:this.phoneNumber,password:md5(this.password)}],
			// 					success: function () {
			// 						uni.hideLoading()
			// 						uni.showToast({title: '注册成功',icon:"success"});
			// 						setTimeout(function(){
			// 							uni.navigateBack();
			// 						},1000)
			// 					},
			// 					fail:function(e){
			// 						console.log('set error:'+JSON.stringify(e));
			// 					}
			// 				});
			// 			}
			// 		});
			// 	},1000)
			// 
			},
			weChartRegister(){
				
			},
			toLogin(){ 
				uni.hideKeyboard()
				uni.redirectTo({url: 'login'});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";
	.nameAlready{
		font-size: 20rpx;
		width: 170rpx;
		color: #ff0000;
		text-decoration: underline;
	}
	.wechartRegister{
		text-align: center;
	}
	.wechartRegisterImg{
		width: 100upx;
		height: 100upx;
		margin-top: 30upx;
	}
	.wechartRegisterText{
		font-size: 22upx;
		color: #ffffff;
	}
	#wxRegister{
		background-color: #01a5e4 ;
		height: max-content;
		padding: 0;
		border: none;
		// line-height: 0;
	}
	#wxRegister::after{ 
		border: none; 
	}
</style>
