<template>
	<Navigation :title_name="'个人中心'" :isReturn="person.userList&&person.userList.length>0?1:3"
		:returnIcon="'../../static/education/add_user.png'" :color="'#000000'" :bgc="'#FFFFFF'"
		@iconClick="jumpAddStudent" :isCenter="true" />
	<view v-if="person.userList&&person.userList.length>0">
		<view class="ech">
			<view class="card-wrapper">
				<view class="card-scroll">
					<view v-for="(item,index) in person.userList" :key="index">
						<CurrItem :datas="item" @onOpenStu="getOpenStu(item,index)" @onUnBind="getUnBind(item)"
							:isChange="false" :bgIndex="index" />
					</view>
				</view>
			</view>
			<view class="option-list">
				<view class="option-item" v-for="(op,opIndex) in person.optionList" :key="opIndex"
					@click.stop="toRelated(op,opIndex)">
					<image :src="op.icon" mode=""></image>
					<view class="option-item-name">{{op.name}}</view>
				</view>
			</view>
		</view>
		<!-- 用户信息弹窗 -->
		<view class="dio" v-if="showChangeStudent">
			<view class="dio-contain">
				<view class="dio-padding">
					<view class="center" :style="{background:stuInfoBackground[backIndex]}">
						<image src="https://minio.23544.com:9010/data-center/gzh/Avatar.png" mode=""></image>
						<view class="stu-name">{{showLookStudentInfo.name}}</view>
					</view>
					<view class="id-card">
						<view class="number">{{showLookStudentInfo.number}}</view>
						<view class="look-btn" :style="{color:stuInfoBackground[backIndex]}" @click="seePhone">查看</view>
					</view>
				</view>
				<view class="cancel" @tap="showChangeStudent=false"></view>
			</view>
		</view>
		<!-- 联系客服弹窗 -->
		<Popups :isShow="person.isShowService" :bgColor="'#fff'">
			<view style="width: 250px;display: flex;flex-direction: column;align-items: center;">
				<view class="popup_cont_des" style="font-size: 20px;margin-top: 25px;">
					{{person.phoneNum}}
				</view>
				<view class="popup_add_btn">
					<button class="flex" @tap="connectServe"
						style="font-size: 16px;height: 35px;line-height: 35px;width: 100%;">
						<image src="@/static/education/phone_icon.png" mode=""></image>
						联系客服
					</button>
				</view>
			</view>
		</Popups>
	</view>
	<view v-else>
		<view class="empty_box">
			<image src="@/static/null_icon.png" mode=""></image>
			<text>暂无学生个人信息~</text>
		</view>
		<view class="add_btn">
			<button open-type="getPhoneNumber" v-if="!showReactivePhone" @getphonenumber="getPhoneNumber">添加学生</button>
			<button @tap="jumpAddStudent" v-else>添加学生</button>
		</view>
	</view>

	<!-- 短信验证弹窗 -->
	<Popups :isShow="showDioUnbindMseeage" :width="260" height="auto" :bgColor="'#fff'"
		@cancelBtn="showDioUnbindMseeage=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: 18px;">向{{unBindPhone}}发送验证信息<br />请输入验证码</view>
					<view class="flex">
						<input v-for="(item,index) in sendYZMCode" @input="inputLastNumber(index,$event)" :key="index"
							:value="item.name" :focus="item.isFocus" @blur="preventFocus(index,$event)"  @click="messageFocus(index,$event)"
							placeholder-style="color:#BDBDBD;" type="number" maxlength="1" 
							:class="{'border-indey-message':item.isFocus,'border-error':errroYZM}"
							: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="timeLast>0" class="send-btn">{{timeLast}}秒后重发</button>
				<button v-else @click="retrieAgain" class="send-btn"
					style="font-size: 16px;">{{showMessageText?'再次获取':'获取验证码'}}</button>
			</view>
			<view class="popup_add_btn">
				<button @click="okClickMessage" class="massage-btn" style="font-size: 18px;">确认</button>
			</view>
		</view>
	</Popups>

</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		nextTick
	} from "vue";
	import Popups from "@/components/popups/index.vue";
	import CurrItem from "@/components/currItem/index.vue";
	import {
		getUserInfo,
		getUserLogin,
		getUserPhone,
		getConfig,
		postRegister,
		getbindstudentList,
		getSTudyReportInfo,
		putUnBind,
		LookStudentInfo,
		bindMobile,
		getSendTelphoneCode
	} from "@/api/user";
	import {
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import Navigation from '@/components/navigation/index.vue'

	const showDioUnbindMseeage = ref(false) //解绑用户
	const showMessageText = ref(false) //解绑倒计时显示文字
	const unBindPhone = ref('')
	const timeLast = ref(0)
	const unBindParams = { //解绑用户参数
		"StudentId": 0,
		"Mobile": "0",
		"SmsId": "0",
		"SmsCode": "0"
	}
	const errroYZM=ref(false) //错误短信边框提示
	const sendYZMCode = ref([ //短信验证6位数字
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
		{
			name: '',
			isFocus: false
		},
	])
	let person = reactive({
		phoneNum: '18812545252',
		phoneNumAll: '',
		userList: [], // 用户列表
		optionList: [{
				name: '联系客服',
				icon: '../../static/education/phone.png'
			},
			{
				name: '关于',
				icon: '../../static/education/about.png'
			}
		],
		isShowService: false, // 是否显示联系客服
		currStudent: {} // 当前学生
	})
	const showLookStudentInfo = reactive < {
		number: string,
		name: string
	} > ({})
	const webSrc = ref('') //webview 换取code 的UR了地址
	const jumpHasConnentStudent = ref(false) //是否已有关联学生
	const appId = ref('') //appId
	const showStudentList = ref(false)
	const showReactivePhone = ref(false) //和本机互动，展示是否授权获取手机号
	const preventFocus = (index) => {
		sendYZMCode.value[index].isFocus = false
	}

	const focstState=ref(false)
	//输入框自动失焦获取聚焦
	const inputLastNumber = (index, event) => {
		sendYZMCode.value[index].name = event.detail.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 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 showTimer = ref(true) //是否60秒之后再次获取短信验证码
	const timer = ref(0)
	const retrieAgain = () => {
		if (showTimer.value) {
			showTimer.value = false
			// let telephone = uni.getStorageSync('USER_PHONE')
			showMessageText.value = true
			timeLast.value = 60
			timer.value = setInterval(() => {
				timeLast.value--; // 时间减一秒
				if (timeLast.value <= 0) { // 当倒计时结束时
					clearInterval(timer.value); // 停止计时器
					showTimer.value = true
				}
			}, 1000); // 每秒执行一次
			console.log(unBindPhone.value);
			getSendTelphoneCode(unBindPhone.value, 2).then(res => {
				console.log(res);
				if (res.Code == 200) {
					unBindParams.SmsId = res.Data
				}
			})
		}
	}
	const okClickMessage = () => {
		let messageCode = ''
		sendYZMCode.value.forEach(item => {
			messageCode += item.name
		})
		unBindParams.SmsCode = messageCode
		putUnBind(unBindParams).then(res => {
			console.log(res);
			if (res.Code == 200) {
				showDioUnbindMseeage.value = false
				getStudentList() //重新刷新拉取学生列表
			} else {
				errroYZM.value=true
				uni.showToast({
					title:res.Message,
					position:'bottom'
				});
				sendYZMCode.value.forEach(item => {
					item.name=''
				})
			}
		})
	}
	// 解绑
	const getUnBind = (item) => {
		showDioUnbindMseeage.value = true
		errroYZM.value=false
		LookStudentInfo(item.Id).then(res => {
			unBindParams.StudentId = item.Id
			unBindParams.Mobile = res.Data.Telephone
			unBindPhone.value = res.Data.Telephone
		})
		sendYZMCode.value.forEach(item => {
			item.name = ''
		})
	}
	onShow(() => {
			getUserInfo().then(res => {
				console.log('用户信息', res);
				showReactivePhone.value = res.Data.BindMobile
			})
			getStudentList()
	})

	//查看
	const showChangeStudent = ref(false)
	const stuInfoBackground = ['#6B86FF', '#45CB9F', '#22C1F2']
	const backIndex = ref(0)
	const getOpenStu = (item, index) => {
		showChangeStudent.value = true
		person.currStudent = item
		backIndex.value = index % 3
		LookStudentInfo(item.Id).then(res => {
			console.log(res);
			showLookStudentInfo.name = res.Data.RealName
			person.phoneNumAll = res.Data.Telephone
			showLookStudentInfo.number = res.Data.Telephone.replace(res.Data.Telephone.substring(3, 7), '****')
		})
	}
	// 号码查看
	const seePhone = () => {
		showLookStudentInfo.number = person.phoneNumAll
	}
	// 跳转关于
	const toRelated = (item, index) => {
		if (item.name === '关于') {
			uni.navigateTo({
				url: `/pages/userRelated/index`
			})
		} else if (item.name === '联系客服') {
			person.isShowService = !person.isShowService
			6000().then(res => {
				console.log(res);
				if (res.Code == 200) {
					person.phoneNum = res.Data.ServiceNumber
				} else {
					uni.showToast({
						title: '暂无客服'
					})
				}
			})
		}
	}

	// 添加学生跳转
	const toAddStudent = (item, index) => {
		console.log(99999);
	}


	//获取用户本机手机号
	const getPhoneNumber = (e) => {
		console.log(111, e.detail.code);
		if (e.detail.errMsg == "getPhoneNumber:ok") {
			bindMobile(e.detail.code).then(res => {
				if (res.Code == 200) {
					uni.navigateTo({
						url: '/pages/userAddStudent/index'
					})
				} else {
					console.log('未授权手机号')
				}
			})
		}
	}
	const jumpAddStudent = (e) => {
		uni.navigateTo({
			url: '/pages/userAddStudent/index'
		})
	}
	// 获取学生列表方法
	const getStudentList = () => {
		getbindstudentList().then(res => {
			console.log('学生列表', res);
			if (res.Code == 200) {
				person.userList = res.Data
			}
		})
	}
	//监听获取token之后 发送请求学生列表
	watch(() => showStudentList.value, () => {
		console.log(showStudentList.value);
		if (showStudentList.value) {
			getStudentList()
		}
	})

	//联系客服
	const connectServe = () => {
		uni.makePhoneCall({
			phoneNumber: person.phoneNum
		})
	}
</script>

<style lang="scss" scoped>
	.empty_box {
		z-index: 0;
	}

	page {
		overflow: hidden;
		position: inherit !important;
	}

	.popup_cont {
		width: 211px;
	}

	.add_btn {
		position: absolute;
		bottom: 30%;
	}

	.ech {
		width: 100vw;
		position: relative;
		top: 0px;
		margin-bottom: 50px;

		.card-wrapper {
			background: #F5F5F5;
			padding: 10px 20px;
			display: flex;
			justify-content: center;
		}
	}

	.option-list {
		width: 100%;
		padding: 10px 20px;
		box-sizing: border-box;
		background: #fff;

		.option-item {
			display: flex;
			align-items: center;
			color: #3D425B;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			letter-spacing: 0.72px;
			padding: 10px 0;
			border-bottom: 1px solid #ECECEC;

			&:last-child {
				border-bottom: 0 !important;
			}

			image {
				width: 20px;
				height: 20px;
				margin-right: 8px;
			}

			.option-item-name {
				width: 92%;
			}
		}
	}

	.dio {
		width: 100vw;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.42);
		z-index: 99;

		.dio-contain {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.dio-padding {
				border-radius: 10px;
				background: #FFF;
				padding: 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.cancel {
				margin-top: 20px;
				width: 40px;
				height: 40px;
				background: url('@/static/education/cancel.png');
				background-size: 100% 100%;
			}
		}
	}

	.center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 250px;
		height: 200px;
		border-radius: 10px;
		background: #6B86FF;

		image {
			width: 90px;
			height: 90px;
			border-radius: 50%;
		}

		.stu-name {
			color: #FFF;
			font-size: 18px;
			font-weight: 400;
			letter-spacing: 0.72px;
			margin-top: 5px;
		}
	}

	.id-card {
		width: 100%;
		box-sizing: border-box;
		padding: 20px 0 0 0;
		color: #3D425B;
		font-family: PingFang SC;
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		letter-spacing: 0.72px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.look-btn {
			color: #6B86FF;
		}
	}

	.btn-add {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 10px;
		opacity: 0;
	}

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

		.popup_cont_pic {
			margin: 40rpx auto 20rpx auto;
			background: #fff;
			width: 140rpx;
			height: 140rpx;
			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: 36rpx;
			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: 32rpx;
				margin-top: 30rpx;

				&: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: 30px !important;
		line-height: 30px !important;
	}
	.border-indey-message{
		border: 3px solid skyblue !important;
	}
	.border-error{
		border: 1px solid #FF0000 !important;
	}
</style>