<template>
	<view class="content">
		<view class="logo">
			<image :src="imgSrc" alt="logo" srcset="" class="iconBox" mode="widthFix"></image>
			<view>欢迎登录使用CFFP</view>
		</view>
		<view class="content-login">
			<view class="login_title">
				{{liginName}}
			</view>
			<view class="login-text">
				<text class="text">{{form.name}}</text>
			</view>
			<view class="login-text">
				<text class="text">{{form.mobile}}</text>
			</view>
			<view class="login-code">
				<!-- <view class="text" style="display: flex;justify-content: space-between;"> -->
					<input name="form.code" placeholder="输入验证码" v-model="form.code" type="number" maxlength="6"/>
					<text @click="sendMessage()" :class="{'grey':disabledSendBtn}">{{sendCodeHtml}}</text>
				<!-- </view> -->
					
			</view>
			<view class="agree">
				<label class="radio" style="padding-right: 10rpx;">
					<radio :checked="agreeFlag" @click="agreeFlag=!agreeFlag"/></label>
				<text>已阅读并同意</text><a href="#">银盾保险经纪服务协议</a><text>和</text><a href="">隐私政策</a>
			</view>
			<view class="footer" @click="nextstep()">
				<text>下一步</text>
			</view>
		</view>

	</view>
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common';
	export default {
		data() {
			return {
				imgSrc: '../../static/cffp_logo.png',
				liginName: '登录',
				disabledSendBtn:false,
				agreeFlag:false,
				remainTimes:60,
				sendCodeHtml:'获取验证码',
				userId: '',
				hasCrossDistrict:'',
				form:{
					name: '',
					mobile: '',
					code: null
				}
			}
		},
		onLoad(options) {
			this.hasCrossDistrict = options.hasCrossDistrict
			this.form.name = options.name?options.name:''
			this.form.mobile = options.mobile? options.mobile: ''
			this.form.id = options.shareId?options.shareId:''
			this.form.areaName = options.areaName
			this.form.areaId = options.areaId
			this.form.invitationCode = options.invitationCode
			this.form.partnerLevel = options.partnerLevel
			// this.form =JSON.parse( options.form)
		},
		methods:{
			sendMessage(){
				const params = {
					mobileNo:this.form.mobile,
					type:"1"
				}
				if(common.mobileNoValid(this.form.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.sendCodeHtml = `${this.remainTimes}(S)`;
				  if (this.remainTimes <= 0) {
				    this.sendCodeHtml = '获取验证码';
				    this.remainTimes = 60;
				    this.disabledSendBtn = false;
				    clearInterval(this.timer);
				  }
				}, 1000);
			  },
			nextstep(){
				console.log(this.form.code, 555)
				if(this.form.code =='' ||this.form.code == null ){
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if(this.agreeFlag == false) {
					uni.showToast({
						title: '请阅读并勾选银盾保险经纪服务协议和隐私条款',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				const params = {
					loginType:'3',
					...this.form
				}
				api.loginVerification(params).then((res)=>{
					if(res['success']){
						console.log(res, 5454)
						this.userId = String(res['data']['userId']);
						uni.setStorageSync('isLogin','1')
						uni.navigateTo({
							url:'/pages/application-process/basic-info?userId=' + this.userId  + '&shareId=' + this.form.id + '&hasCrossDistrict=' + this.hasCrossDistrict
						})
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		background: #20279B;
		border-radius: 0px 0px 0px 0px;

		.logo {
			text-align: center;
			color: #fff;
			padding: 60rpx 0;

			view {
				margin-top: 40rpx;
				font-size: 40rpx;
			}

			.iconBox {
				border-radius: 15rpx;
				width: 20% !important;
			}
		}

		.content-login {
			background-color: #fff;
			margin: 0 20rpx;
			border-radius: 30rpx;
			padding: 40rpx 60rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			min-height: 65%;
			.login_title{
				text-align: center;
				font-size: 40rpx;
				margin-bottom: 60rpx;
			}
			.login-text{
				width: 100%;
				border-bottom: 1px solid  #CECECE;
				padding: 20rpx 0;
				.text{
					padding: 20rpx;
				}
			}
			.login-code{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid  #CECECE;
				padding: 20rpx;
				.grey{
					font-size: 24rpx;
					color: #CECECE;
				}
			}
			
		}
		.agree{
			font-size: 28rpx;
			color:#666;
			text-align: center;
			margin-top: 40rpx;
			a{
				color: #20279B;
				text-decoration: none;
			}
		}
		.footer{
			background: #20279B;
			color: #fff;
			width: 550rpx;
			height: 100rpx;
			background: #20279B;
			border-radius: 80rpx;
			margin: 60rpx auto;
			text-align: center;
			opacity: 1;
			text{
				font-size: 36rpx;
				line-height: 100rpx;
			}
		}
	}
</style>
