<template>
	<view class="content">
		<view class="header flex_row">
			<image src="/static/images/logo_main.png"></image>
		</view>

		<view class="list flex_col">
			<view class="sjh list-call">
				<input class="sl-input" v-model="login.mobile" type="number" maxlength="11" placeholder="输入手机号码" />
			</view>
			<view class="tips">
				<text v-if="showPhoneErr">手机号码格式错误，请重新填写</text>
			</view>

			<view class="yzm flex_row">
				<view class="list-call l-short">
					<input class="sl-input" v-model="login.verify_code" type="text" maxlength="6" placeholder="输入验证码"
						password="true" />
				</view>
				
				<view v-if="!sended" class="list-call l-small flex_col" @click="sendSMS">
					获取验证码
				</view>
				<view v-else class="list-call l-small flex_col">{{count}}s</view>
			</view>
			<view class="tips" >
				<text v-if="showCodeErr">验证码错误，请重新填写</text>
			</view>
		</view>


		<view class="agreement-box flex_row flex_start">
			<image @click="agreed=!agreed" class="a-icon" src="../../static/images/login/agreed_circle.png" mode="aspectFit" v-if="agreed"></image>
			<image @click="agreed=!agreed" class="a-icon" src="../../static/images/login/agree_circle.png" mode="aspectFit" v-else></image>
			我已同意
			<!-- <text @click="jumpAgreement()">《隐私政策》</text>及 -->
			<text @click="jumpAgreement()">《用户注册服务协议》</text>
		</view>

		<view class="button-login" hover-class="button-hover" @tap="bindLogin()">
			<text>登录</text>
		</view>
		<button class="button-login button-reverse" hover-class="button-hover" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" >
			<text >获取微信手机号登录</text>
		</button>

		<!-- <view class="agreenment">
			<navigator url="/pages/login/forget" open-type="navigate">忘记密码</navigator>
			<text>|</text>
			<navigator url="/pages/login/reg" open-type="navigate">注册账户</navigator>
		</view> -->
	</view>
</template>

<script>
	//没有挂载全局而按需引用接口,可以更清楚知道当前page所用接口
	import {
		postLogin,postSendSMS,wechatGetPhoneNumberLogin,configGet
	} from "@/nxTemp/apis/userAPI.js"
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				sended:false,//是否发送验证码
				count:60,
				code:"",
				agreed:false,//是否同意协议
				login: {
					mobile: '',//手机
					ticket: '',//短信验证码返回的
					verify_code:'',//验证码
					// mobile: '13500071371',//手机
					// ticket: 'test',//短信验证码返回的
					// verify_code:'666666',//验证码
				},
				WXdetail:{
					code:"",
					appid:"",
					encryptedData:"",
					iv:"",
				},
				showCodeErr:false,
				showPhoneErr:false
			};
		},
		computed:{
			checkMobile(){
				return this.login.mobile
			},
			checkCode(){
				return this.login.verify_code
			}
		},
		async onLoad() {
			// let _login = await this.$tools.promisify(uni.login)()
			// this.code = _login.code
			// uni.login({
			// 	complete(e) {
			// 		console.log(888,e);
			// 	}
			// })
		},
		methods: {
			...mapActions(["setUserData"]),
			bindLogin() {
				let {mobile} = this.login
				let phoneReg = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
				if (!phoneReg.test(mobile)) {
					this.showPhoneErr = true
					return this.$tools.showNone("请输入正确的手机号");
				}
				this.showPhoneErr = false
				if (this.login.verify_code.length < 6) {
					this.showCodeErr = true
					return this.$tools.showNone("请输入正确的验证码");
				}
				this.showCodeErr = false
				
				if(!this.agreed){
					return this.$tools.showNone("请确认已阅读并同意隐私协议");
				}
				postLogin(this.login).then(res => {
					this.loginSuccess(res)
				}).catch((e)=>{
					this.$tools.showNone(e.errMsg)
				})
			},
			//登录成功处理
			loginSuccess({token,mobile}){
				this.setUserData({token,mobile})
				this.$Router.replace({name:"index"})
			},
			jumpAgreement(){
				this.$Router.push('/pages/login/agreement')
			},
			sendSMS(){
				console.log("sendSMS");
				let {mobile} = this.login
				let phoneReg = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
				if(!mobile||!phoneReg.test(mobile)){
					this.showPhoneErr = true
					return 
				}else if(phoneReg.test(mobile)){
					this.showPhoneErr = false
				}
				postSendSMS({mobile}).then(res => {
					this.$tools.showNone("发送成功");
					this.login.ticket = res||""
					setButtonCount(this)
				});
				function setButtonCount(that){//激活验证码交互
					that.sended = true
					let _count = that.count
					let timer = setInterval(()=>{
						if(that.count>0)that.count--
						else {
							clearInterval(timer)
							that.sended = false
							that.count = _count
						}
					},1000)
				}
			},
			async decryptPhoneNumber(e){
				console.log("decryptPhoneNumber",e);
				if(!this.agreed){
					return this.$tools.showNone("请确认已阅读并同意隐私协议");
				}
				if(e.detail.errMsg!=="getPhoneNumber:ok")return this.$tools.showNone("该操作需要您的手机号码信息")
				this.$tools.showNone("解析数据...")
				
				const accountInfo = uni.getAccountInfoSync();
				let {encryptedData,iv} = e.detail
				let {code} = await this.$tools.promisify(uni.login)()
				let appid = accountInfo.miniProgram.appId
				this.WXdetail = {encryptedData,iv,code,appid}
				this.getWXPhoneNumber(this.WXdetail)
			},
			getWXPhoneNumber(WXdetail){

				wechatGetPhoneNumberLogin(WXdetail).then(res => {
					// this.login.ticket = res.data||""
					this.loginSuccess(res)
				}).catch((e)=>{
					this.$tools.showNone(e.errMsg)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 261rpx;
		height: 261rpx;
		border-radius: 50%;
		margin-top: 130rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: #009874;
	}

	.header image {
		width: 171rpx;
		height: 171rpx;
		border-radius: 50%;
	}

	.list {
		padding-top: 130rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
		.tips{
			height: 50rpx;
			padding-top: 10rpx;
			width: 100%;
			color: #EA5061;
		}
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		width: 688rpx;
		color: #333333;
		background: #F2F2F7;
		border-radius: 10rpx;
		// margin-bottom: 60rpx;
		/* border-bottom: 0.5px solid #e2e2e2; */
		
	}
	.l-short{
		width: 428rpx;
	}
	.l-small{
		width: 240rpx;
		margin-left: 20rpx;
		color: #009874;
		justify-content: center;
	}


	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 688rpx;
		height: 100rpx;
		border-radius: 10rpx;
		background: #009874;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40rpx;
		font-weight: 800;
		> button{
			width: 688rpx;
			height: 100%;
			// height: 100rpx;
			flex-shrink: 0;
			padding: 0;
			border: none;
			font-size: 34rpx;
		}
	}
	.button-reverse{
		color: #009874;
		background: white;
		border: 2rpx solid #009874;
	}

	.button-hover {
		// background: linear-gradient(-90deg, rgba(0, 186, 30, 0.8), rgba(0, 231, 0, 0.8));
	}
	
	.agreement-box{
		margin-top: 20rpx;
		padding-left: 30rpx;
		color: #696D6F;
		.a-icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
		> text{
			color: #009874;
		}
	}
</style>
