<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="agree">
					<label class="radio" style="padding-right: 10rpx;">
						<radio :checked="agreeFlag" @click="agreeFlag=!agreeFlag" />
					</label>
					<text>已阅读并同意</text>
					<text class="file" @click="getFile(1)">服务协议</text>
					<text>和</text>
					<text class="file" @click="getFile(2)">隐私政策</text>
				</view>
				<view class="footer" @click="login()">
					<text style="line-height: 80rpx;">{{loginTypeSync=='visitor' ? '购买' : '登录'}}</text>
				</view>
			</view>
			<view class="" style="width: 80rpx;height: 80rpx;margin: auto;" @click="closebootpage()">
				<image style="width: 80rpx;height: 80rpx;" src="../../static/Slice3.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common';
	import {companyInfo} from "@/environments/environment";
	export default {
		data() {
			return {
				agreeFlag:false,
				mobile: '',
				code: '',
				sendCode: '获取验证码',
				disabledSendBtn: false,
				remainTimes:60,
				userId:'',				
				loginTypeSync:''
			}
		},
		mounted() {
			this.loginTypeSync = uni.getStorageSync('loginType');
		},
		methods: {
			getFile(type){
				uni.navigateTo({
					url:`/components/clause/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()
						}
					})
				}else{
					common.errorDialog(2,'手机号校验错误')
				}
			},
			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']){
						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']);
						// uni.navigateTo({
						// 	url:'/pages/orderConfirm/orderConfirm?userId=' + this.userId
						// })
						this.loginTypeSync = "codelogin";
						uni.$emit('loginUpdate');
						this.closebootpage()
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			
			},
			closebootpage() {
				this.$emit('close', this.userId,this.loginTypeSync)
			},
		}
	}
</script>

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

	.inputItem {
		border-bottom: 2rpx solid #CECECE;
		padding: 20rpx;
		font-size: 28rpx;
		.uni-input{
			font-size: 26rpx;
		}
	}
	.file{
			color: #20279B;
			text-decoration: none;
		}
	.agree {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-top: 40rpx;

		a {
			color: #20279B;
			text-decoration: none;
		}
	}

	.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;
	}

	.footer {
		width: 400rpx;
		height: 80rpx;
		background: #20279B;
		border-radius: 80rpx;
		opacity: 1;
		margin: 60rpx auto;
		display: flex;
		justify-content: center;
		color: #FFFFFF;
		font-size: 26rpx;
	}
</style>
