<template>
	<view class="content">
		<view class="content-box">
			<view style="margin: 40rpx 30rpx;">
				<view class="inputItem">
					<input class="uni-input" name="invitationCode" maxlength="11" placeholder="输入手机号" v-model="mobile" />
				</view>
				<view class="login-code">
					<input style="font-size: 26rpx;"  name="form.code" placeholder="输入验证码" v-model="code" type="number" maxlength="6" />
					<text style="width: 200rpx;text-align: right;" @click="sendMessage()" :class="{'grey':disabledSendBtn}">{{sendCode}}</text>
				</view>
				
				<view class="protol">
					<view class="empty" v-if="!agreeFlag" @click="agreeFlag=true"></view>
					<text v-else class="iconfont icon-icon_duihao-mian" @click="agreeFlag=false"></text>
					<text style="color: #666;">我已阅读并同意</text>
					<text  style="color: #20269B;" @click="getFile(1)">服务协议</text>
					<text style="color: #666666;">和</text>
					<text  style="color: #20269B;" @click="getFile(2)">隐私条款</text>
				</view>
				<view class="footerBox">
					<view class="footer" @click="login()">
						<text style="line-height: 80rpx;">{{loginTypeSync=='visitor' ? '登录' : '购买'}}</text>
					</view>
				</view>
				
			</view>
			<view class="closeBtn" style="width: 80rpx;height: 80rpx;margin: auto;" @click="closebootpage('close')">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/Slice3.png" mode=""></image>
			</view>
		</view>
		<restrictedTip ref="restrictedTip"/>
	</view>
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common';
	import {companyInfo} from "@/environments/environment";
	import dataHandling from "@/util/dataHandling";
	import restrictedTip from '@/components/commonPopup/restrictedTip.vue'
	export default {
		props:{
			wayType:{
				type:String,
				default:'1' //1代表登录，2代表分享
			},
			// 哪个地方中用到了这个登录
			loginSource:{
				type:String,
			},
			// 哪个页面中用到了这个登录
			pageSource:{
				type:String,
			}
		},
		components:{
			restrictedTip
		},
		data() {
			return {
				agreeFlag:false,
				mobile: '',
				code: '',
				sendCode: '获取验证码',
				disabledSendBtn: false,
				remainTimes:60,
				userId:'',				
				loginTypeSync:''
			}
		},
		mounted() {
			this.loginTypeSync = uni.getStorageSync('loginType');
			console.log('loginSource',this.loginSource);
		},
		methods: {
			getFile(type){
				uni.navigateTo({
					url:`/myPackageA/ruleAndContract/clause?type=${type}`
				})
			},
			sendMessage(){
				const params = {
					mobileNo:this.mobile,
					type:"1",
					source: "cffp"
				}
				if(common.mobileNoValid(this.mobile) && !this.disabledSendBtn){
					api.verificationCode(params).then((res)=>{
						if(res['success']){
							this.delayTime()
						}
					})
				}
				
			},
			delayTime() {
				this.disabledSendBtn = true;
				this.timer = setInterval(() => {
				  this.remainTimes--;
				  this.sendCode = `${this.remainTimes}(S)`;
				  if (this.remainTimes <= 0) {
				    this.sendCode = '获取验证码';
				    this.remainTimes = 60;
				    this.disabledSendBtn = false;
				    clearInterval(this.timer);
				  }
				}, 1000);
			  },
			login(){
				if(this.mobile =='' ||this.mobile == null ){
					uni.showToast({
						title: '请输入手机号',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if(this.code =='' ||this.code == null ){
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
			
				if(this.agreeFlag == false) {
					uni.showToast({
						title: '请阅读并勾选'+`${companyInfo.companyFullName}`+'服务协议和隐私条款',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				const params = {
					loginType:'3',
					mobile: this.mobile,
					code: this.code
				}
				api.loginVerification(params).then((res)=>{
					if(res['success']){
						// 禁用账号，不让登录
						if(res.data.userIsActive == 2){
							this.$refs.restrictedTip.open()
							return
						}
						this.userId = String(res['data']['userId']);
						uni.setStorageSync('isLogin','1');
					    uni.setStorageSync('loginType','codelogin');
						uni.setStorageSync('cffp_userId', this.userId);
						uni.setStorageSync('uni-token', res.data['token']);
						this.loginTypeSync = "codelogin";
						this.queryInfo()
						uni.$emit('loginUpdate');
						this.$emit('afterLogin')
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			
			},
			closebootpage(val) {
				if(!val){
					dataHandling.pocessTracking(
					  '点击',
					  `用户在${this.loginSource}模块登录系统`,
					  '点击',
					  2,
					  `${this.loginSource}`,
					)
				}
				
				// val代表关闭叉号
				this.$emit('close', this.userId,this.loginTypeSync,val)
				
			},
			queryInfo() {
				api.queryInfo({userId:uni.getStorageSync('cffp_userId')}).then(res=>{
					
					if (res['success']) {
						delete res.data.commonResult
						const cffp_userInfo = {
							...res.data
						}
						uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo))
						this.closebootpage()
					}
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		position: absolute;
		left:50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 630rpx;
		// height: 500rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		opacity: 1;
		.closeBtn{
			position: absolute;
			bottom: -30%;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.inputItem {
		border-bottom: 2rpx solid #CECECE;
		padding: 20rpx;
		font-size: 28rpx;
		.uni-input{
			font-size: 26rpx;
		}
	}
	.file{
			color: #20279B;
			text-decoration: none;
		}
	
	.protol{
		margin-top: 20rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		.empty{
			width: 30rpx;
			height: 30rpx;
			border: 1rpx solid #20269B;
			border-radius: 50%;
			margin-right: 5rpx;
		}
		.icon-icon_duihao-mian{
			font-size: 30rpx;
			color: #20269B;
			margin-right: 5rpx;
		}
	}
	.login-code {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #CECECE;
		padding: 20rpx;
		font-size: 26rpx;
		.grey {
			font-size: 24rpx;
			color: #CECECE;
		}
	}

	.content {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* width: -webkit-fill-available;
	    height: -webkit-fill-available; */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transition: .2s;
		transition: .2s;
		background-color: rgba(36, 36, 36, 0.5);
		z-index: 999;
	}

	.text {
		padding-top: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.footerBox{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.footer {
			width: 70%;
			background: #20279B;
			border-radius: 40rpx;
			margin-top: 50rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 26rpx;
		}
	}
	
</style>
