<template>
	<!-- 登录弹窗 -->
	<view>
		<uni-popup ref="loginPopup" :mask-click="false">
			<view class="loginPopupBox">
				<view class="loginPopupTitle">
					<view>
						<text>产品预约</text>
					</view>
					<view class="iconGuanbi">
						<text @click="canle" class="iconfont icon-guanbi"></text>
					</view>
				</view>
				<view class="loginPopupInput">
					<view class="loginPopupInputLine" style="margin-bottom: 30rpx;">
						<input style="font-size: 28rpx;" v-model="mobile" maxlength="11" type="number"
							placeholder="请输入手机号">
					</view>
					<view class="loginPopupInputLine"
						style="display: flex;justify-content: space-between;align-items: center;">
						<input style="font-size: 28rpx;" v-model="code" maxlength="6" type="number"
							placeholder="请输入验证码">
						<view @click="c_sendCode"
							style="color: #20269B;width: 200rpx;font-size: 30rpx;text-align: right;">
							{{sendCodeHtml}}
						</view>
					</view>
				</view>
				<!-- <view class="agree">
					<label class="radio" style="padding-right: 5rpx;">
						<radio  style="transform:scale(0.8);" :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="loginPopupButtonBox">
					<!-- <view @click="canle"><button class="popup_replenish_button2" size="mini">取消</button></view> -->
					<view @click="confirm"><button class="popup_replenish_button" >确认</button></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from "@/api/api";
	import common from '../../common/common';
	export default{
		data(){
			return{
				//验证码倒计时
				remainTimes: 60,
				//验证码文字
				sendCodeHtml: '获取验证码',
				//计时器
				timer: null,
				//手机号
				mobile: null,
				//验证码
				code: null,
				//是否同意协议
				agreeFlag:false,
				
			}
		},
		methods:{
			getFile(type){
				uni.navigateTo({
					url:`/components/clause/clause?type=${type}`
				})
			},
			confirm() {
				if (!common.mobileNoValid(this.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式错误',
						duration: 2000
					})
					return;
				}
				if (!this.code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码',
						duration: 2000
					})
					return;
				}
				// if(this.agreeFlag == false) {
				// 	uni.showToast({
				// 		title: '请阅读并勾选江苏赢盾财务顾问有限公司服务协议和隐私条款',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				//登录
				const params = {
					loginType: '3',
					mobile: this.mobile,
					code: this.code
				}
				api.loginVerification(params).then((res) => {
					if (res['success']) {
						uni.setStorageSync('isLogin', '1');
						uni.setStorageSync('loginType', 'codelogin');
						uni.setStorageSync('cffp_userId', res.data['userId']);
						uni.setStorageSync('uni-token', res.data['token']);
						//关闭弹窗
						this.$refs.loginPopup.close();
						uni.$emit('loginUpdate');
						//调用父组件函数处理剩余逻辑
						this.$emit('confirm');
					} else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			canle(){
				this.$refs.loginPopup.close();	
				this.$emit('canle');
			},
			open(){
				this.$refs.loginPopup.open('bottom');
			},
			//点击发送验证码
			c_sendCode() {
				let phoneRs = common.mobileNoValid(this.mobile);
				if (this.remainTimes != 60) {
					return;
				}
			
				if (phoneRs) {
					uni.showLoading({
						mask: true
					});
					api.verificationCode({
						"mobileNo": this.mobile,
						"type": "1",
						"source": "cffp"
					}).then(res => {
						uni.hideLoading();
						if (res['success']) {
							uni.showToast({
								icon: 'none',
								title: '发送成功',
								duration: 2000
							})
							this.delayTime();
						} else {
							uni.showToast({
								icon: 'none',
								title: res['message'],
								duration: 2000
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '手机号格式错误',
						duration: 2000
					})
				}
			},
			//开启计时器
			delayTime() {
				this.timer = setInterval(() => {
					this.remainTimes--;
					this.sendCodeHtml = `${this.remainTimes}(S)`;
					if (this.remainTimes <= 0) {
						this.sendCodeHtml = '获取验证码';
						this.remainTimes = 60;
						clearInterval(this.timer);
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep .uni-popup__wrapper{
		margin: 0rpx !important;
	}
	.loginPopupBox {
		background-color:#fff;
		border-radius: 30rpx 30rpx 0  0;
		font-size: 30rpx;
		.loginPopupTitle {
			padding: 30rpx;
			font-weight: bold;
			border-bottom: #dfdfdf 1rpx solid;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.iconGuanbi{
				font-size: 20rpx;
			}
		}
		.loginPopupInput {
			padding: 30rpx;
			.loginPopupInputLine {
				background-color: #eee;
				padding: 25rpx;
				border-radius: 5px;
				
			}
		}
		.loginPopupButtonBox {
			// display: flex;
			// justify-content: space-around;
			padding:20rpx 30rpx 30rpx 30rpx;
			.popup_replenish_button {
				color: #fff;
				background-color: rgba(9, 44, 171, 1);
				border-radius: 200rpx;
				padding:3rpx 0rpx;
				font-size: 32rpx;
			}
			.popup_replenish_button2 {
				color: rgba(9, 44, 171, 1);
				background-color: #fff;
				border: 1rpx solid rgba(9, 44, 171, 1);
				border-radius: 200rpx;
				padding: 0rpx 50rpx;
				font-size: 30rpx;
			}
		}
		.agree {
			font-size: 28rpx;
			color: #666;
			text-align: center;
			margin-top: 40rpx;
		
			.file {
				color: #20279B;
				text-decoration: none;
			}
		}
	}
</style>