<template>
	<Navigation :title_name="'添加学生'" :isReturn="0" :color="'#000000'" :bgc="'#FFFFFF'" :isCenter="true" />
	<view class="add_phone">
		<view class="input_des text_right" v-if="!person.studentInfo.name">请输入办理智慧校园套餐的手机号</view>
		<view class="add_phone_input flex">
			<view class="input_name">
				<text style="font-size:20px;">学生账号：</text>
				<br />
				<br />
				<br />
				<text v-if="!person.studentInfo.name" class="input_des">(学生绑定手机号)</text>
			</view>
			<view class="showAccountNumber">
				{{person.keyword.length}}/11
			</view>
			<input placeholder-style="color:#BDBDBD;" type="number" maxlength="11"  v-model="person.keyword" @focus="focusBtn" focus
				placeholder="请输入手机号" />
			<svg @click="clearBtn" v-if="person.clearbtn" t="1669974117863" class="icon" viewBox="0 0 1024 1024"
				version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3497" width="20" height="20">
				<path
					d="M687.603949 656.994302 541.10027 510.457878 687.603949 363.943966c8.829086-8.840342 8.829086-23.122627 0-31.961946-8.850575-8.840342-23.13286-8.840342-31.962969 0L509.138324 478.495932 362.623389 331.980997c-8.840342-8.818853-23.122627-8.818853-31.962969 0-8.840342 8.840342-8.840342 23.144116 0 31.984459l146.493445 146.514935L330.638931 656.994302c-8.819876 8.830109-8.819876 23.133883 0 31.962969 8.840342 8.829086 23.144116 8.829086 31.984459 0l146.514935-146.514935 146.502655 146.514935c8.830109 8.829086 23.112394 8.829086 31.962969 0C696.433034 680.129208 696.45657 665.824411 687.603949 656.994302z"
					p-id="3498" fill="#bfbfbf"></path>
				<path
					d="M938.362063 510.457878c0-237.061161-192.174857-429.234995-429.247274-429.234995-237.062184 0-429.246251 192.173834-429.246251 429.234995 0 237.083673 192.185091 429.257507 429.246251 429.257507 97.345072 0 186.435133-33.110095 258.440074-87.677898 2.958378-3.354398 4.900613-7.636934 4.900613-12.449543 0-10.506285-8.521071-19.026332-19.027355-19.026332-5.431709 0-10.287297 2.162246-13.752212 5.826705l-0.2415 0c-64.456011 47.414893-143.745868 75.800383-229.876528 75.800383-214.679407 0-388.730489-174.073594-388.730489-388.719232 0-214.688617 174.051081-388.718209 388.730489-388.718209 214.688617 0 388.697743 174.029592 388.697743 388.718209 0 65.548902-15.386432 127.277802-44.081984 181.490517l0 0.309038c-0.508583 1.811252-1.104147 3.576455-1.104147 5.519714 0 10.507308 8.520047 19.028379 19.028379 19.028379 8.18952 0 15.054881-5.254677 17.703197-12.494569l0 0.132006C920.349827 648.38625 938.362063 581.536726 938.362063 510.457878z"
					p-id="3499" fill="#bfbfbf"></path>
			</svg>
		</view>
		<view class="phone_list" v-if="person.studentInfo.StudentName">
			<view class="phone_item">姓名：{{person.studentInfo.StudentName}}</view>
			<view class="phone_item">学校：{{person.studentInfo.SchoolName}}</view>
			<view class="phone_item">年级：{{person.studentInfo.Grade}}·{{person.studentInfo.ClassName}}</view>
		</view>
	</view>
	<view class="add_btn">
		<!-- 查询 -->
		<button @click.stop="addQuery" style="font-size: 17px;height: 44px;line-height: 44px;"
			v-if="!person.studentInfo.StudentName">查询</button>
		<!-- 本机绑定成功 -->
		<button @click.stop="addBind" style="font-size: 17px;height: 44px;line-height: 44px;"
			v-if="person.studentInfo.StudentName && (!person.isShowVerifyPopup) && (!person.isShowInformPopup)">绑定</button>
		<!-- 名字绑定成功 -->
		<button @click.stop="isShowPopupStudent=true" style="font-size: 17px;height: 44px;line-height: 44px;"
			v-if="person.isShowVerifyPopup">绑定</button>
		<!-- 短信绑定成功 -->
		<button @click.stop="isShowPopupMessage=true" style="font-size: 17px;height: 44px;line-height: 44px;"
			v-if="person.isShowInformPopup">绑定</button>
		<!-- 返回个人中心 -->
		<button @click.stop="backUser" style="font-size: 17px;height: 44px;line-height: 44px;">返回个人中心</button>
	</view>
	<!-- 绑定成功弹窗 -->
	<Popups :isShow="person.isShowBindPopup" :showCancel="false" :width="300" :height="200" :bgColor="'#fff'"
		@cancelBtn="person.isShowBindPopup=false">
		<view class="p_cont">
			<view class="popup_cont_pic">
				<image src="@/static/education/ok_icon.png" mode=""></image>
			</view>
			<view class="popup_cont_des" style="font-size: 20px;">
				绑定成功
			</view>
			<view class="popup_add_btn flex">
				<button @click="covAddQuery" class="send-btn">继续绑定学生</button>
				<button @click="backUser" class="send-btn">返回个人中心</button>
			</view>
		</view>
	</Popups>
	<!-- 学生验证弹窗 -->
	<!-- <Popups :isShow="true" :width="300" :bgColor="'#fff'"> -->
	<Popups :isShow="isShowPopupStudent" :width="300" :bgColor="'#fff'" @cancelBtn="isShowPopupStudent=false">
		<view class="p_cont">
			<view class="popup_cont_title">
				验证信息
			</view>
			<view class="popup_cont_list">
				<view class="cont_list_item"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<view class="item_subName" style="font-size: 20px;margin-bottom: 10px;">请补充完学生姓名：</view>
					<view style="display: flex;align-items: center;justify-content: center;">
						<view style="margin-right:4px;color: #000;">{{nameFull.getName}}</view>
						<input placeholder-style="color:#fff;" style="width:28px;background-color: #fff;padding-left: 6px;"
							v-model="nameFull.inputName" focus maxlength="1" type="text"/>
					</view>
				</view>
				<view class="cont_list_item">
					<view style="font-size: 19px;margin-bottom: 10px;">请输入家长手机号后六位数字：</view>
					<view class="flex">
						<input v-for="(item,index) in teleLastNumber" 
						:key="index" placeholder-style="color:#BDBDBD;"
						:class="{'border-indey-message':item.isFocus}"
							@blur="preventFocusInfo(index,$event)" 
							@click="infoFocus(index,$event)"
							:value="item.name" type="number" maxlength="1"
							:focus="item.isFocus" @input="lastInput(index,$event)"  
							:selection-start="(item.isFocus)?0:-1" :selection-end="(item.isFocus)?item.name.length:-1"/>
					</view>
				</view>
			</view>
			<view class="popup_add_btn">
				<button @click="addVerifyBind" class="massage-btn" style="font-size: 20px;">绑定</button>
			</view>
		</view>
	</Popups>
	<!-- 短信验证弹窗 -->
	<!-- <Popups :isShow="true" :width="300" :bgColor="'#fff'"> -->
	<Popups :isShow="isShowPopupMessage"  :width="260" :bgColor="'#fff'" @cancelBtn="isShowPopupMessage =false">
		<view class="p_cont">
			<view class="popup_cont_title">
				短信验证
			</view>
			<view class="popup_cont_list">
				<view class="cont_list_item1">
					<view style="font-size: 16px;">向{{uesrTellphone}}发送验证信息<br />请输入验证码</view>
					<view class="flex">
<!-- 							@blur="preventFocus(index,$event)" :value="item.name" :focus="item.isFocus" @focus="messageFocus(index,$event)" -->
						<input v-for="(item,index) in sendYZMCode" @input="inputLastNumber(index,$event)"
						 :key="index" @click="messageFocus(index,$event)" @blur="messageBlur(index)"
							:value="item.name" :focus="item.isFocus" 
							:class="{'border-indey-message':item.isFocus,'border-error':errroYZM}"
							placeholder-style="color:#BDBDBD;" type="number" maxlength="1"  
							:selection-start="(item.isFocus)?0:-1" :selection-end="(item.isFocus)?item.name.length:-1" />
					</view>
				</view>
			</view>
			<view class="popup_cont_tag flex">
				<button v-if="person.oneTime>0" class="send-btn">{{person.oneTime}}秒后重发</button>
				<button v-else @click="retrieAgain" class="send-btn">{{getSendMsgText?'再次获取':'获取验证码'}}</button>
			</view>
			<view class="popup_add_btn">
				<button @click="okClick" class="massage-btn" style="font-size: 20px;">确认</button>
			</view>
		</view>
	</Popups>
	<MessageToast :isShow="person.isShowMessage" :bgColor="'rgba(0,0,0,.4)'">
		{{searchMsg}}
	</MessageToast>
	<!-- 信息错误提示框 -->
	<MessageToast :isShow="person.isShowErrorMessage" :bgColor="'rgba(0,0,0,.7)'">
		信息错误
		<view class="message_red" style="font-size: 17px;margin-top: 5px;">{{InfoMessage}}</view>
	</MessageToast>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		ref
	} from "vue";
	import Popups from "@/components/popups/index.vue";
	import MessageToast from "@/components/messageToast/index.vue";
	import Navigation from '@/components/navigation/index.vue'
	//api
	import {
		getUnbindstudentinfo,
		getSendbindstudent,
		getSendTelphoneCode
	} from '@/api/user.ts'
	const searchMsg = ref('')
	const InfoMessage = ref('')
	let person = reactive({
		keyword: '', // 搜索关键字
		clearbtn: false, // 清除按钮
		studentInfo: {},
		btnName: '查询',
		isShowBindPopup: false, // 绑定成功弹窗
		isShowVerifyPopup: false,
		isShowInformPopup: false, // 短信验证弹窗
		nameKeyword: '',
		phoneKeyword: '',
		timer: null, // 时间计时器
		oneTime: 0,
		isShowMessage: false,
		isShowErrorMessage: false, // 验证错误提示框
	})
	const isShowPopupStudent = ref(false) // 家长验证弹窗
	const isShowPopupMessage = ref(false) // 短信验证弹窗
	const BindCode = ref(0) //绑定账号的返回code码，判断选择哪个参数，哪个弹框
	let uesrTellphone = ''
	const sendYZMCode = ref([ //短信验证6位数字
		{
			name: '',
			isFocus: false,
			start:-1,
			end:-1
		},
		{
			name: '',
			isFocus: false,
			start:-1,
			end:-1
		},
		{
			name: '',
			isFocus: false,
			start:-1,
			end:-1
		},
		{
			name: '',
			isFocus: false,
			start:-1,
			end:-1
		},
		{
			name: '',
			isFocus: false,
			start:-1,
			end:-1
		},
		{
			name: '',
			isFocus: false,
			start:-1,
			end:-1
		},
	])
	const teleLastNumber = ref([ //手机尾号6位数字
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
	])
	const getSendMsgText = ref(false)
	let sendCodeData = ''
	const nameFull = reactive({ //名字验证加上
		getName: '',
		inputName: ''
	})
	// 清空按钮
	const clearBtn = () => {
		person.keyword = ''
		person.clearbtn = false
	}
	// 获取焦点
	const focusBtn = () => {
		person.clearbtn = true
	}
	const messageBlur=(index)=>{
		sendYZMCode.value[index].isFocus = false
	}
	//输入框自动失焦获取聚焦
	const inputLastNumber = (index, event) => {
		sendYZMCode.value[index].name = event.detail.value
		console.log(focstState.value);
		if(!focstState.value){
			if (sendYZMCode.value[index].name) {
				if (index < 5) {
					sendYZMCode.value[index + 1].isFocus = true
				}
			}else{
				if (index > 0) {
					sendYZMCode.value[index - 1].isFocus = true
				}
			}
		}else{
			focstState.value=false  //点击状态未真
		}
	}
	const focstState=ref(false)
	const messageFocus=(index,event)=>{  //短信框输入聚焦
	let name = sendYZMCode.value[index].name
		if(!name){
			focstState.value=false  //点击状态未真
		}else{
			focstState.value=true  //点击状态未真
		}
		errroYZM.value=false  //关闭红色错误弹窗
		sendYZMCode.value[index].isFocus=true
	}
	const focstState1=ref(false)
	const infoFocus=(index,event)=>{  //手机尾号框输入聚焦
			teleLastNumber.value[index].isFocus=true
		let name = teleLastNumber.value[index].name
			if(!name){
				focstState1.value=false  //点击状态未真
			}else{
				focstState1.value=true  //点击状态未真
			}
	}
	const preventFocusInfo = (index) => {
		teleLastNumber.value[index].isFocus = false
	}
	//输入框自动失焦获取聚焦
	const lastInput = (index, event) => {
		teleLastNumber.value[index].name = event.detail.value
		if(!focstState1.value){
			if (teleLastNumber.value[index].name) {
				if (index < 5) {
					teleLastNumber.value[index + 1].isFocus = true
				}
			}else{
				if (index > 0) {
					teleLastNumber.value[index - 1].isFocus = true
				}
			}
		}else{
			focstState1.value=false  //点击状态为真
		}
	}

	// 查询
	const addQuery = () => {
		// 查询
		if (person.keyword) {
			person.isShowMessage = false
			console.log(person.keyword);
			getUnbindstudentinfo(person.keyword).then(res => {
				console.log(res);
				if (res.Code !== 200) {
					person.isShowMessage = true
					searchMsg.value = res.Message
					setTimeout(()=>{
						person.isShowMessage = false
					},3000)
					person.studentInfo = {}
				} else {
					person.studentInfo = res.Data
					person.nameKeyword = person.studentInfo.StudentName
					nameFull.getName = person.studentInfo.StudentName.replace('*', '')
					let sentNumber = person.keyword
					uesrTellphone = sentNumber.substring(0, 3) + '****' + sentNumber.substring(7, 11)
					console.log(uesrTellphone);
				}
			})
		}
	}
	const cont1 = ref(true)
	const cont2 = ref(true)
	const errroYZM =ref(false)

	// 绑定
	const addBind = () => {
		// 判断该学生家长的手机号是否与 微信授权获取的手机号相等
		// 相等绑定成功，反之，验证信息
		let params = {
			StudentTelephone: person.keyword,
			VerifyName: '',
			VerifyLastTelephone: '',
			VerifySMSId: ''
		}
		switch (BindCode.value) {
			case 0:
				params = {
					StudentTelephone: person.keyword,
					VerifyName: '',
					VerifyLastTelephone: '',
					VerifySMSId: '',
					VerifyCode: ''
				}
				break;
			case 511:
				let lastNumber = ''
				let VerifyName = nameFull.getName + nameFull.inputName
				console.log(VerifyName)
				teleLastNumber.value.forEach(item => {
					lastNumber += item.name
				})
				params = {
					StudentTelephone: person.keyword,
					VerifyName: VerifyName,
					VerifyLastTelephone: lastNumber,
					VerifySMSId: '',
					VerifyCode: ''
				}
				if (!nameFull.inputName) {
					person.isShowMessage = true
					searchMsg.value = '请补全名字'
					setTimeout(() => {
						person.isShowMessage = false
					}, 3000)
					return
				}
				if (lastNumber.length !== 6) {
					console.log('尾号的长度是不是等于');
					person.isShowMessage = true
					searchMsg.value = '请补全手机尾号'
					setTimeout(() => {
						person.isShowMessage = false
					}, 3000)
					return
				}
				break;
			case 1:
					console.log('验证码1')
			case 512:
				let messageCode = ''
				sendYZMCode.value.forEach(item => {
					messageCode += item.name
				})
				params = {
					StudentTelephone: person.keyword,
					VerifyName: '',
					VerifyLastTelephone: '',
					VerifySMSId: sendCodeData,
					VerifyCode: messageCode
				}
				if (messageCode.length !== 6) {
					person.isShowMessage = true
					searchMsg.value = '请补全验证码'
					setTimeout(() => {
						person.isShowMessage = false
					}, 3000)
					return
				}
			
			default:
				break;
		}
		console.log(params);
		if (person.studentInfo.StudentName) {
			person.isShowMessage = false
			getSendbindstudent(params).then(res => {
				console.log(res);
				BindCode.value = res.Code
				if (res.Code == 200) {
					person.isShowBindPopup = true
					person.isShowVerifyPopup = false
					person.isShowInformPopup = false
					isShowPopupStudent.value = false
					isShowPopupMessage.value = false
					BindCode.value=0
					teleLastNumber.value.forEach(item => {
						item.name=''
					})
					nameFull.inputName=''
					sendYZMCode.value.forEach(item => {
						item.name=''
					})
					// uni.navigateBack()   //绑定成功,返回个人中心页
				} else if (res.Code == 511) {
					isShowPopupStudent.value = true
					person.isShowVerifyPopup = true
					person.isShowBindPopup = false
					person.isShowInformPopup = false
					//消息提示
					if (cont2.value) {
						cont2.value = false
					} else {
						person.isShowErrorMessage = true
						InfoMessage.value = `您还有${res.Message}机会`
						setTimeout(() => {
							person.isShowErrorMessage = false
						}, 3000)
					}
				} else if ((res.Code == 512)||(res.Code == 1)) {
					isShowPopupStudent.value = false
					isShowPopupMessage.value = true
					person.isShowInformPopup = true
					person.isShowBindPopup = false
					person.isShowVerifyPopup = false
					person.oneTime = 0
					if (cont1.value) {
						cont1.value = false
						person.isShowMessage = true
						searchMsg.value = '信息验证有误，跳转电话验证'
						setTimeout(() => {
							person.isShowMessage = false
						}, 3000)
					} else {
						errroYZM.value=true   //短信边框变红
						person.isShowMessage = true
						searchMsg.value = '短信验证错误，请重试'
						sendYZMCode.value.forEach(item=>item.name='')
						setTimeout(() => {
							person.isShowMessage = false
						}, 3000)
					}
					//消息提示
				} else {
					person.isShowMessage = true
					searchMsg.value = res.Message
					setTimeout(() => {
						person.isShowMessage = false
					}, 3000)
				}
			})
		}
	}
	// 继续绑定
	const covAddQuery = () => {
		person.keyword = ''
		person.isShowBindPopup = false
		person.isShowVerifyPopup = false
		person.isShowInformPopup = false
		person.studentInfo = {}
		person.btnName = '查询'
	}
	// 信息验证绑定
	const addVerifyBind = () => {
		addBind()
	}
	// 时间计时器

	//  短信验证确认
	const okClick = () => {
		addBind()
	}
	const showTimer = ref(true) //是否60秒之后再次获取短信验证码
	// 再次获取短信验证
	const retrieAgain = () => {
		if (showTimer.value) {
			showTimer.value = false
			// let telephone = uni.getStorageSync('USER_PHONE')
			getSendMsgText.value = true
			person.oneTime = 60
			person.timer = setInterval(() => {
				person.oneTime--; // 时间减一秒
				if (person.oneTime <= 0) { // 当倒计时结束时
					clearInterval(person.timer); // 停止计时器
					showTimer.value = true
				}
			}, 1000); // 每秒执行一次
			getSendTelphoneCode(person.keyword, 1).then(res => {
				console.log(res);
				if (res.Code == 200) {
					sendCodeData = res.Data
				}
			})
		}
	}
	// 返回个人中心
	const backUser = () => {
		uni.reLaunch({
			url: '/pages/user/index'
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8 !important;
	}

	.message_red {
		color: #BC0101;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.add_phone {
		background: #fff;
		padding: 32rpx 32rpx 60rpx 32rpx;
		font-size: 28rpx;
		color: #545454;

		.input_des {
			color: #727272;
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
		}

		.text_right {
			margin: 0 0 15rpx 200rpx;
		}

		.add_phone_input {
			position: relative;
			white-space: nowrap;
			.showAccountNumber{
				position: absolute;
				right: 10px;
			}
			.input_name {
				width: 200rpx;
				font-size: 30rpx;
				font-weight: 600;
				white-space: nowrap;
				line-height: 35rpx;
				letter-spacing: 4rpx;

				text {
					white-space: nowrap;
				}
			}

			input {
				border: 2rpx solid #BABABA;
				border-radius: 12rpx;
				width: 60%;
				padding: 15rpx 60rpx 15rpx 30rpx;
				color: #2C2C2C;
				font-weight: 500;
			}

			.icon {
				position: absolute;
				right: 10rpx;
			}
		}

		.phone_list {
			margin-top: 40rpx;
			margin-bottom: 50rpx;

			.phone_item {
				line-height: 50rpx;
				font-size: 16px;
				color: #545454;
			}
		}
	}

	.p_cont {
		// padding: 20px;
		background: #fff;
		border-radius: 30rpx;

		.popup_cont_pic {
			margin: 40rpx auto 20rpx auto;
			background: #fff;
			width: 150rpx;
			height: 150rpx;
			border-radius: 30rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.popup_add_btn {
			button {
				width: 45%;

				&:nth-child(1) {
					width: 55%;
				}
			}
		}

		.popup_cont_title {
			font-size: 42rpx;
			color: #575757;
			font-weight: 600;
		}

		.popup_cont_tag {
			justify-content: flex-end;
			width: 100%;
			text-align: right;
			margin-top: 20rpx;

			button {
				border: 2rpx solid #A5B5FA;
				color: #A5B5FA;
				font-size: 24rpx;
				margin: 0;
				padding: 0 20rpx;
				background: #fff;
				height: 45rpx;
				line-height: 45rpx;

				&:nth-child(2) {
					margin-left: 20rpx;
				}
			}
		}

		.popup_cont_list {
			text-align: left;

			.cont_list_item {
				font-size: 28rpx;
				background: #F8F9FF;
				border-radius: 8rpx;
				padding: 28rpx;
				margin-top: 30rpx;
				color: rgba(137, 137, 137, 1);

				&:first-child {
					input {
						width: 99%;
						border: 0;
						padding: 10rpx 0;
						text-align: left;
					}
				}

				input {
					border: 2rpx solid #9C9C9C;
					border-radius: 12rpx;
					width: 16.6%;
					padding: 15rpx 0;
					color: #2C2C2C;
					font-weight: 500;
					// margin-top: 20rpx;
					margin-right: 10rpx;
					text-align: center;

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.cont_list_item1 {
				font-size: 28rpx;
				border-radius: 8rpx;
				margin-top: 30rpx;

				input {
					border: 2rpx solid #9C9C9C;
					border-radius: 12rpx;
					width: 16.6%;
					padding: 15rpx 0;
					color: #2C2C2C;
					font-weight: 500;
					margin-top: 20rpx;
					margin-right: 10rpx;
					text-align: center;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	.massage-btn {
		width: 100% !important;
		height: 40px !important;
		line-height: 40px !important;
	}

	.send-btn {
		width: 50% !important;
		height: 35px !important;
		line-height: 35px !important;
		font-size: 18px;
	}
	.border-indey-message{
		border: 3px solid skyblue !important;
	}
	.border-error{
		border: 1px solid #FF0000 !important;
	}
</style>