<template>
	<view class="login-page">


		<view class="icon-info">
			<img class="logo" src="../../static/logo.png" alt="">
			<image class="title" src="../../static/title.png" mode=""></image>
		</view>

		<view class="btn-box">
			<button class="wx-login" id="wx-login" open-type="getPhoneNumber"
				@getphonenumber="decryptPhoneNumber">手机号快捷登录</button>
			<view class="phone-login" @click="goOther">验证码登录</view>
			<!-- <view class="protocol" @click="handleProtocol">如您点击授权，您将统一并授权 <text class="link">《隐私政策》</text> </view> -->
			<!-- <u-checkbox-group v-model="check">
				<u-checkbox size="34" shape="circle" >
				</u-checkbox>
				<view  class="protocol" @click="handleProtocol">已阅读并同意用户协议
				<view class="notice-protocol" v-if="notice">请勾选用户协议</view>
				</view>
			</u-checkbox-group> -->
		</view>

		<!-- 注册认证 -->
		<u-popup :show="show" v-show="show" closeable :closeOnClickOverlay="false" mode="center" round="24"
			@close="close">
			<view class="modal">
				<view class="title">
					实名认证
				</view>
				<u--form id="uForm" errorType="toast" labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item label="姓名" prop="name" ref="item1" labelWidth="100">
						<u--input placeholder="请输入姓名" v-model="userInfo.name" border="none"></u--input>
					</u-form-item>
					<u-form-item label="身份证" prop="idCardNum" ref="item1" labelWidth="100">
						<u--input type="idcard" placeholder="请输入身份证号码" maxlength="18" v-model="userInfo.idCardNum"
							border="none"></u--input>
					</u-form-item>

				</u--form>
					<u-checkbox-group v-model="check">
						<u-checkbox size="34" shape="circle" >
						</u-checkbox>
						<view  class="protocol" @click="handleProtocol">已阅读并同意 
						<view class="link">
							《用户隐私协议》
						</view> 
						</view>
						<view class="notice-protocol" v-if="notice">请勾选用户隐私协议</view>
					</u-checkbox-group>
				<button class="save-btn" type="default" @click="submit">提交</button>
			</view>
		</u-popup>



		<!-- 	<view class="notice">
			未注册的手机号验证号将自动为您创建账户
		</view>
 -->
	</view>
</template>

<script>
	import {
		wechatLogin,
		getPhoneNum,
		getLoginToken,
		auth,
		getUserDetail,
		clear
	} from '@/api/common.js'
	export default {
		data() {
			return {
				check:false,
				notice:false,
				id:'',//其他页面传来的id
				scene:'',//其他页面携带的参数统一存放
				redirect:'',//重定位地址
				show: false,
				params:'',//重定向页面参数
				userInfo: {
					name: '',
					idCardNum: '',
					phone:''
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'idCardNum':[
						{
							type: 'string',
							max: 18,
							required: true,
							message: '请输入身份证号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
								// 上面有说，返回true表示校验通过，返回false表示不通过
								return reg.test(value);
							},
							message: '身份证号不合法',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					] ,
				},
			}
		},
		
		methods: {
			// 获取手机号微信登录
			decryptPhoneNumber(val) {
				let that = this
				if (!val.detail.hasOwnProperty('encryptedData')) return
				uni.showLoading({
					title: '登录中'
				})
				console.log(val);
				getPhoneNum({
					code: val.detail.code
				}).then(data => {
					console.log(11111111,data);
					if(data.msg != '成功'){
						clear({type:1}).then(()=>{
							this.decryptPhoneNumber(val)
						})
					}else{
						const inviteUserId = uni.getStorageSync('inviteCode') == 'undefined' ? null : uni.getStorageSync('inviteCode')
						this.userInfo.phone = data.content
						getLoginToken({
							phoneNum: data.content,
							inviteUserId,
							platformType:1
						}).then(msg => {
							if(msg.state != 'Success') return
							uni.login({
								provider: 'weixin',
								success(r) {
									wechatLogin({
										jsCode: r.code,
										phone: data.content,
										loginToken: msg.content
									}).then(res => {
										uni.hideLoading()
										if(res.state == 'Success'){
											uni.setStorageSync('isAuth', res.content
												.isAuth) //登录状态
											uni.setStorageSync('token', res.content
												.token) //登录状态
											uni.setStorageSync('refreshToken', res.content
												.refreshToken) //refreshToken
												
											getUserDetail().then(res => {
												uni.setStorageSync('userInfo', JSON.stringify(res.content))
													if(that.redirect){
														console.log(that.scene);
														uni.reLaunch({
															// url:`${that.redirect}?scene=${that.scene}&id=${that.id}`
															url:`${that.redirect}?${that.params}`
														})
													}else{
														uni.switchTab({
															url: '../../pages/index/index'
														})
													}
												// if (res.content.isAuth == 1) {
												// } else { //未实名认证
												// 	that.show = true
												// }
											})
										}
									
									})
								}
							})
						})
					}
				})

			},
			handleProtocol() {
				console.log(22222222);
				uni.navigateTo({
					url:'./xieyi'
				})
			},
			goOther() {
				console.log(this.redirect);
				uni.navigateTo({
					// url: `../../login/login/otherLogin?redirect=${this.redirect}&scene=${this.scene}&id=${this.id}`
					url: `../../login/login/otherLogin?redirect=${this.redirect}&${this.params}`
				})
			},
			close(){
				this.show = false
			},
			// 获取验证码
			sendCode() {
				if (this.isSend) return
				this.isSend = true
				this.timer = setInterval(() => {
					if (this.seconds <= 0) {
						this.codeText = '获取验证码'
						this.seconds = 60
						this.isSend = false
						clearInterval(this.timer)
					} else {
						this.codeText = this.seconds + 's后获取'
					}
					this.seconds--
				}, 1000)
			},
			// 实名认证
			submit() {
				if(!this.check) return this.notice = true
				this.$refs.uForm.validate().then(r => {
					uni.showLoading({
						title:'验证中'
					})
					auth(this.userInfo).then(res => {
						uni.hideLoading()
						if (res.msg == '成功') {
							this.show = false
							if(this.redirect){
								uni.reLaunch({
									// url:`${this.redirect}?scene=${this.scene}&id=${this.id}`
									url:`${this.redirect}?${this.params}`
								})
							}else{
								uni.switchTab({
									url: '../../pages/index/index'
								})
							}
						}
					})
				})
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.uForm.setRules(this.rules)
			})

		},
		onLoad(options) {
			this.redirect = options.redirect
			this.scene = options.scene
			this.id = options.id
			for (let key in options) {
				if(key != 'redirect'){
					if(this.params){
					 this.params += `&${key}=${options[key]}`
					}else{
						 this.params += `${key}=${options[key]}`
					}
				}
			}
		}

	}
</script>

<style lang="scss">
	.login-page {
		.icon-info {
			text-align: center;
			margin-top: 200rpx;

			.logo {
				width: 280rpx;
				height: 280rpx;
			}

			.title {
				width: 500rpx;
				height: 86rpx;
				margin-top: 50rpx;
			}
			
		}

		.btn-box {
			margin-top: 420rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.wx-login {
				width: 690rpx;
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: bold;
				background: #61B5FD;
				color: #fff;
			}

			.phone-login {
				width: 690rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 46rpx;
				background-color: #fff;
				box-shadow: 0rpx 0rpx 12rpx 2px rgba(0, 0, 0, 0.04);
				border: none !important;
				font-size: 32rpx;
				font-weight: bold;
				color: #0F0F0F;
				margin: 40rpx 0 0;
				transform: rotateZ(360deg);
			}

		}
		
		.u-checkbox-group{
			position: relative;
			padding-bottom: 30rpx;
			margin-top: 20rpx;
			.protocol {
				text-align: center;
				font-size: 28rpx;
				color: #999999;
				display: flex;
				.link{
				color: #0C6FFE;
				}
			}
			
			.notice-protocol {
				color: red;
				margin-left: 50rpx;
				font-size: 26rpx;
				position: absolute;
				bottom: 0;
				left: 0%;
			}
		}
		
		.modal {
			width: 680rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.title {
				text-align: center;
				font-size: 38rpx;
				font-weight: bold;
				margin-top: 30rpx;
				margin-bottom: 50rpx;
			}

			.u-form-item {
				border-radius: 46rpx;
				height: 92rpx;
				background: #F5F5F5;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-top: 32rpx;

				.u-form-item__body {
					padding: 0 !important;
				}

				.u-form-item__body__left,
				.u-form-item__body__right {

					input {
						line-height: 92rpx;
						height: 92rpx;
					}
				}
			}

			.save-btn {
				width: 432rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
				font-size: 32rpx;
				font-weight: bold;
				background: $uni-color-primary;
				color: #fff;
				margin-top: 32rpx;
			}


		}

	}
</style>
