<template>
	<view v-if="showLogin"> 
		<!-- 导航栏区域 -->
		<view class="navBarWrap">
			登录
		</view>
		<view class="loginWrap">
			<view class="loginIcon">
				<image src="../../static/image/Frame_544_1@2x.png" mode=""></image>
			</view>
			<view class="loginInpList">
				<view class="loginInpItem">
					<input type="number" v-model="mobile" placeholder="输入手机号"/>
				</view>
				<view class="loginInpItem">
					<input type="text" v-model="captcha" placeholder="输入验证码" />
					<view class="getCodeBtn" @click="getCode">
						{{codeTxt}}
					</view>
				</view>
			</view>
			<view class="regAlertTxt">
				未注册的手机号验证后自动创建账号
			</view>
			<view class="loginBtn" @click="login">
				登录
			</view>
			<view class="userProt">
				<image @click="checkProt = true" v-if="!checkProt" style="width: 23rpx;height: 23rpx;" src="../../static/image/gouxuankuang_1@2x.png" mode=""></image>
				<image @click="checkProt = false" v-if="checkProt" style="width: 23rpx;height: 23rpx;" src="../../static/image/Group_592@2x.png" mode=""></image>
				请阅读并同意<text @click="goTo('../my/aboutUs?navTitle=用户协议')">《用户协议》</text>和<text @click="goTo('../my/aboutUs?navTitle=隐私政策')">《隐私政策》</text>
			</view>
			<view class="otherLoginTxt" v-if="switchTab == '1'">
				<view class="line"></view>
				第三方登录
				<view class="line"></view>
			</view>
			<view class="otherLoginIcon" @click="weixinlogin" v-if="switchTab == '1'">
				<image src="../../static/image/weixin-4_1@2x.png" mode=""></image>
			</view>
			
			<view class="userProt">
				<image style="width: 31rpx;height: 31rpx;" src="../../static/image/kefudianhua_1@2x.png" mode=""></image>
				客服电话：400-900-3305
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex";
	export default{
		data(){
			return{
				showLogin:false,
				checkProt:false,
				codeFlag:true,
				codeTxt:"获取验证码",
				mobile:'',
				event:'mobilelogin',//登录：mobilelogin。修改：changemobile
				captcha:'',
				switchTab:'1',
				plat:'android'
				// backurl:''
			}
		},
		onLoad() {
			// this.backurl=option.backurl
			if(uni.getStorageSync('token')){
				this.$href('/pages/findWonderful/findWonderful',2)
			}else{
				this.$request('/common/getConfig',{type:'8'}).then((res)=>{
					this.switchTab = res.data.switch
					this.plat = plus.os.name.toLowerCase()
				})
				this.showLogin = true
			}
		},
		methods:{
			goTo(url){
				uni.navigateTo({
					url:url
				})
			},
			login(){
				if(!this.check.telphone(this.mobile)){return;}
				if(this.captcha == ''){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				if(!this.checkProt){
					uni.showToast({
						title:'请阅读并同意《用户协议》及《隐私政策》',
						icon:'none'
					})
					return
				}
				
				if(uni.getStorageSync('showAgreeInfo')){
					this.reqLogin()
				}else{
					uni.showModal({
						title:'提示',
						content:'为优化您的使用体验和保障软件功能的正常使用，本APP需要搜集您的部分信息，包括您的用户ID、昵称、电话号码、定位位置，若您想继续使用本APP，请点击同意并继续。',
						confirmText:'同意',
						success: (res) => {
							if(res.confirm){
								uni.setStorageSync('showAgreeInfo',true)
								this.reqLogin()
							}
						}
					})
				}
			},
			reqLogin(){
				uni.request({
					url:this.apiUrl + '/user/mobilelogin',
					method:'GET',
					data:{
						mobile:this.mobile,
						captcha:this.captcha
					},
					success: (res) => {
						console.log('手机验证码登录',res)
						if(res.data.code == 1){
							uni.removeStorageSync('jump')
							uni.setStorageSync('token',res.data.data.userinfo.token)
							this.$store.commit('login',res.data.data.userinfo)
							let userID = res.data.data.userinfo.id.toString()
							let userSig = res.data.data.userinfo.user_sign
							let userInfo = {
								user: res.data.data.userinfo.nickname,
								userId:res.data.data.userinfo.id,
								img:res.data.data.userinfo.avatar,
								userSig:res.data.data.userinfo.user_sign
							}
							//登录腾讯IM及时通讯
							let promise = this.tim.login({
								userID: userID,
								userSig: userSig
							});
							promise.then((res) => {
								//登录成功后 更新登录状态
								this.$store.commit("toggleIsLogin", true);
								//自己平台的用户基础信息
								uni.setStorageSync('userInfo', JSON.stringify(userInfo))
								//tim 返回的用户信息
								uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
							}).catch((err) => {
								// 登录失败的相关信息
							});
							this.$href('/pages/findWonderful/findWonderful',2)
							/* if(this.backurl == '' || !this.backurl){
								this.$href('index',2)
							}else{
								if(this.backurl==1){
									uni.navigateBack({
										delta:1
									})
								}else{
									uni.navigateTo({
										url:this.backurl
									})
								}
							} */
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					}
				})
			},
			// 微信登录
			weixinlogin(){
				if(!this.checkProt){
					uni.showToast({
						title:'请阅读并同意《用户协议》及《隐私政策》',
						icon:'none'
					})
					return
				}
				let that = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes.authResult);
				    // 获取用户信息
				    uni.getUserInfo({
				      provider: 'weixin',
				      success: function (infoRes) {
						console.log('用户信息',infoRes)
						uni.request({
							url:that.apiUrl + '/user/wechatLogin',
							method:'POST',
							data:{
								open_id:infoRes.userInfo.openId
							},
							success: (res) => {
								console.log('微信登录',res)
								if(res.data.code == 1){
									uni.setStorageSync('token',res.data.data.userinfo.token)
									that.$store.commit('login',res.data.data.userinfo)
									let userID = res.data.data.userinfo.id.toString()
									let userSig = res.data.data.userinfo.user_sign
									let userInfo = {
										user: res.data.data.userinfo.nickname,
										userId:res.data.data.userinfo.id,
										img:res.data.data.userinfo.avatar,
										userSig:res.data.data.userinfo.user_sign
									}
									//登录腾讯IM及时通讯
									let promise = that.tim.login({
										userID: userID,
										userSig: userSig
									});
									promise.then((res) => {
										//登录成功后 更新登录状态
										that.$store.commit("toggleIsLogin", true);
										//自己平台的用户基础信息
										uni.setStorageSync('userInfo', JSON.stringify(userInfo))
										//tim 返回的用户信息
										uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
									}).catch((err) => {
										// 登录失败的相关信息
									});
									that.$href('/pages/findWonderful/findWonderful',2)
									/* if(that.backurl == '' || !that.backurl){
										that.$href('index',2)
									}else{
										if(that.backurl==1){
											uni.navigateBack({
												delta:1
											})
										}else{
											uni.navigateTo({
												url:that.backurl
											})
										}
									} */
								}else{
									uni.showToast({
										title:res.data.msg,
										icon:'none'
									})
								}
							},
							fail(error) {
								console.log('微信登录失败',error)
							}
						})
				      }
				    });
				  }
				});
			},
			getCode(){
				if(!this.check.telphone(this.mobile)){return;}
				if(this.codeFlag==false){
					return;
				}
				this.sendMessage()
			},
			sendMessage(){
				uni.request({
					url:this.apiUrl+"/sms/send",
					method:"GET",
					data:{
						mobile:this.mobile,
						event:'mobilelogin'
					},
					success: (res) => {
						console.log('发送验证码',res)
						if(res.data.code != 1){
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}else{
							this.codeFlag=false;
							var time = 60
							this.codeTxt="重新获取"+time;
							var timer=setInterval(()=>{
								if(time==1){
									this.codeTxt="获取验证码"
									this.codeFlag=true
									clearInterval(timer)
								}else{
									time--
									this.codeTxt="重新获取"+time;
								}
							},1000)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 导航栏区域 */
	.navBarWrap{height: 88rpx;padding: 0 42rpx;display: flex;align-items: center;justify-content: center;
		padding-top: var(--status-bar-height);
		border-bottom: 2rpx solid rgba(25,24,51,0.06);
	}
	.topLine{height: 2rpx;background: rgba(25,24,51,0.06);}
	.loginWrap{
		padding: 0 90rpx;
		.loginIcon{
			padding-top: 60rpx;
			display: flex;
			justify-content: center;
			image{width:234rpx;height: 234rpx;}
		}
		.loginInpList{
			padding-top: 35rpx;
			.loginInpItem{
				display: flex;
				align-items: center;
				height: 94rpx;
				border-bottom: 2rpx solid #f2f3f5;
				input{flex: 1;padding-right: 30rpx;}
				.getCodeBtn{
					width: 168rpx;
					height: 49rpx;
					border: 1rpx solid #3eb0c8;
					border-radius: 26rpx;
					color: #3eb0c8;
					font-size: 23rpx;
					text-align: center;
					line-height: 49rpx;
				}
			}
		}
		.regAlertTxt{
			padding-top: 59rpx;
			text-align: center;
			color: #969799;
			font-size: 23rpx;
		}
		.loginBtn{
			margin-top: 31rpx;
			height: 86rpx;
			background: #509d94;
			border-radius: 23rpx;
			text-align: center;
			line-height: 86rpx;
			color: #fff;
			font-size: 27rpx;
		}
		.otherLoginTxt{
			padding-top: 300rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #7d7e80;
			font-size: 23rpx;
			.line{
				width: 195rpx;
				height: 2rpx;
				background: #c4c4c4;
			}
		}
		.otherLoginIcon{
			padding-top: 39rpx;
			display: flex;
			justify-content: center;
			image{width: 55rpx;height: 55rpx;}
		}
		.userProt{
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #969799;
			font-size: 23rpx;
			image{margin-right: 10rpx;}
			text{color: #3eb0c8;}
		}
	}
</style>