<template>
	<view class="applyBox">
		<view style="height: 550rpx;">
			<view class="inputBox">
				<view class="txt">
					<text class="require">*</text>昵称 <text class="desTxt">（用于邀请好友及统计业绩显示）</text>
				</view>
				<view class="">
					<input 
						class="user-input"  
						maxlength="10" 
						type="text"
						placeholder="请输入2~10个字符" 
						v-model="form.nickName" 
						:disabled="editNickName"
					/>
				</view>
			</view>
			<view class="inputBox">
				<view class="txt">
					<text class="require">*</text>手机号码 <text class="desTxt">（账号唯一标识）</text>
				</view>
				<view class="codeBox">
					<input 
						type="number" 
						class="user-input" 
						name="mobileNo" 
						placeholder="请输入手机号" 
						v-model="form.mobile" 
						maxlength="11"
						:disabled="editMobile"
					/>
					<text 
						:class="{'grey':disabledSendBtn}"  
						@click.stop="sendMessage()"  
						v-if="loginType=== 'visitor'"
					>
						{{sendCodeHtml}}
					</text>	
				</view>
			</view>
			<view class="inputBox" v-if="loginType=== 'visitor'">
				<view class="txt">
					<text class="require">*</text>验证码 
				</view>
				<view class="">
					<input 
						type="number" 
						class="user-input" 
						name="mobileNo" 
						placeholder="请输入短信验证码" 
						v-model="form.code" 
						maxlength="6"
					/>
				</view>
			</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>
		<view class="btnBox" @click="$emit('apply')">
			{{loginType=='codelogin'?'确认加盟':'注册并加盟'}}
		</view>
	</view>
</template>

<script>
	import api from '@/api/api';
	import * as environment from "@/environments/environment";
	import common from '@/common/common';
	import dataHandling from "@/util/dataHandling";
	export default {
		props: {
		    // 弹窗内容
		    form: {
		      type: Object,
		    },
			editNickName: {
			  type: Boolean,
			  default:false,
			},
			editMobile: {
			  type: Boolean,
			  default:false,
			},
		  },
		data() {
			return {
				companyInfo:environment.companyInfo,
				imgType:environment.companyInfo.imgType,
				baseURL:environment.baseURL,
				
				agreeFlag:false,
				sendCodeHtml:'发送验证码',
				disabledSendBtn:false,
				timer:null,
				remainTimes:60,
				loginType:uni.getStorageSync('loginType'),
			}
		},
		onLoad(options){
			this.loginType=uni.getStorageSync('loginType')
			
		},
		onShow(){
			if(uni.getStorageSync('loginType')){
				this.loginType = uni.getStorageSync('loginType')
			}
		},
		methods: {
			getqueryById(shareId){
				api.queryById({id:shareId}).then(res =>{
					this.form.nickName = res.data.data.name
					this.form.mobile = res.data.data.mobileNumber
					this.editNickName = this.editMobile = true
					
				})
			},
			jumpPage(){
				uni.switchTab({
					url:'/pages/index/index'
				})
				this.$refs.successJoinPopup.close()
				this.$refs.everyJoinPopup.close()
			},
			getFile(type){
				let typeName = type==1?'服务协议':type==2?'隐私条款':''
				// dataHandling.pocessTracking(
				//   '查看协议',
				//   `查看${typeName}`,
				//   '点击',
				//   2,
				//   '申请加盟',
				//   'pages/saleCourseLists/saleCourseLists'
				// )
				uni.navigateTo({
					url:`/myPackageA/ruleAndContract/clause?type=${type}`
				})
			},
			c_agreeFlag(){
				this.agreeFlag=!this.agreeFlag;
			},
			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);
			  },
			  sendMessage(){
			  	const params = {
			  		mobileNo:this.form.mobile,
			  		type:"1",
			  		source: "cffp"
			  	}
			  	if(common.mobileNoValid(this.form.mobile)){
			  		if(!this.disabledSendBtn){
			  			api.verificationCode(params).then((res)=>{
			  				if(res['success']){
			  					this.delayTime()
			  				}else{
			  					common.errorDialog(2,res['message'])
			  				}
			  			})
			  		}
			  	}else{
			  		common.errorDialog(2,'请填写手机号')
			  	}
			},
			gotoApply(){
				if(!this.form.nickName){
					common.errorDialog(1,'请输入昵称');
					return false;
				}
				if(this.form.nickName&&this.form.nickName.length<2){
					common.errorDialog(1,'昵称长度为2~10个字符');
					return 
				}
				if(!this.form.mobile){
					common.errorDialog(1,'请输入手机号');
					return false;
				}
				if(!common.mobileNoValid(this.form.mobile)){
					common.errorDialog(2,'手机号格式填写错误');
					return false;
				}
				if(!this.loginType ||  this.loginType=== 'visitor'){
					if(!this.form.code){
						common.errorDialog(1,'请输入验证码');
						return false;
					}
				}
				if(!this.agreeFlag){
					uni.showToast({
						title: '请阅读并勾选'+`${this.companyInfo.companyFullName}`+'服务协议和隐私条款',
						duration: 3000,
						icon: 'none'					
					})
					return false;
				}
				const params = {
					loginType:'3',
					...this.form
				}
				if(this.loginType == 'codelogin'){
					this.getApply()
					return
				}
				if(!this.loginType || this.loginType == 'visitor'){
					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.setStorageSync('isPartner', res.data['isPartner']); //是否是合伙人
							this.queryInfo()
							// 是合伙人就不让在加盟
							if(res.data.isPartner){
								this.$refs.everyJoinPopup.open()
								return
							}
							// 不是合伙人就加盟
							if(!res.data.isPartner){
								this.getApply()
							}
							
						}else{
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'
							})
						}
					})
					
				}
				
			},
			
			queryInfo() {
				api.queryInfo({userId:uni.getStorageSync('cffp_userId')}).then(res=>{
					// 保存用户得个人信息
					if (res['success']) {
						this.form.nickName = res['data']['nickName']
						if(this.form.nickName){
							this.editNickName = true
						}else {
							this.editNickName = false
						}
						const cffp_userInfo = {
							name: res['data']['realName'],
							mobile: res['data']['mobile'],
							partnerType:res['data']['partnerType'],
							nickName:res['data']['nickName'],
							levelCode:res['data']['levelCode'],
						}
						uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo))
						
					}else {
						uni.setStorageSync('loginType', 'visitor')
					}
					
				})
			},
			// 申请加盟
			getApply(){
				let params = {}
				if(this.inviteUserId){
					 params = {
						applyType:'1',
						applyUserId:this.userId,
						applyMobile:this.form.mobile,
						inviteUserId:this.inviteUserId,
						nickName:this.form.nickName,
						inviterInvitationCode:this.invitationCode,
						shareId:this.shareId
					}
					// return
				}else {
					params = {
						applyType:'2',
						applyUserId:this.userId,
						applyMobile:this.form.mobile,
						nickName:this.form.nickName
					}
				}
				api.newSaveApplyInfo(params).then((res)=>{
					if(res['success']){
						// 是合伙人就不让在加盟
						if(res.data.isPartner){
							this.$refs.everyJoinPopup.open()
							return
						}
						dataHandling.pocessTracking(
						  '加盟',
						  `已成功加盟为合伙人`,
						  '点击',
						  2,
						  '申请加盟',
						  'pages/saleCourseLists/saleCourseLists'
						)
						this.$refs.successJoinPopup.open()
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.applyBox{
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-top: 100rpx;
		box-sizing: border-box;
		.inputBox{
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #E8E8E8;
			.require{
				font-size: 24rpx;
				color: red;
			}
			.desTxt{
				font-size: 24rpx;
				color: #333333;
			}
			.user-input{
				color: black;
				font-size: 26rpx;
				margin-top: 15rpx;
			}
			.codeBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #20279B;
				font-size: 26rpx;
				.grey{
					color: rgba(32, 39, 155, 0.5); /* 50% 透明 */
				}
			}
		}
		.agreeBox{
			padding-top: 20rpx;
			font-size: 26rpx;
			color:#20279B ;
			
		}
		.protol{
			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;
			}
		}
		.btnBox{
			box-sizing: border-box;
			width: 80%;
			text-align: center;
			padding: 20rpx;
			border-radius: 50rpx;
			background-color: #20279B;
			color: #fff;
			font-size: 28rpx;
			margin: 0rpx 50rpx 30rpx 50rpx;
		}
	}
</style>