<template>
	<view class="backgroundContainer">
		<image class="title-img" src="/static/logo.png" />
		<view class="title-font">NU护理单元</view>
		<view class="title-text">开满郁金花的家</view>
		<view class="input-father">
			<view class="add">+86</view>
			<view class="shu"></view>
			<input style="font-size: 27rpx;" type="number" v-model="form.phone" maxlength="11" placeholder="请输入手机号" />
		</view>
		<view class="input-father">
			<input class="password" type="text" v-model="form.password" maxlength="10" placeholder="请输入密码" />
		</view>
		<view class="input-father-blue" @click="jumpTo(`/pages/index/index`)">
			验证并登录
		</view>
		<view class="under-container-title">
			<view :class="isTarget ? 'radio-circle-target' : 'radio-circle'" @click="isTarget = !isTarget"></view>
			<view style="margin-left: 17rpx;" class="radio-circle-font" @click="isTarget = !isTarget">我已阅读并同意</view>
			<view class="radio-circle-blue" @click="showPopup=true">
				《用户协议》
			</view>
			<view class="radio-circle-blue" @click="showPopup=true">
				《隐私政策》
			</view>
		</view>
	</view>
	<!-- 弹出层 -->
	<view v-if="showPopup" class="popup-wrapper">
		<view class="mask" @click="closePopup"></view>
		<view class="box">
			<view class="box-title">
				服务条款和隐私保护提示
			</view>
			<view class="font-father">
				<view class="">
					欢迎使用护理单元app!
				</view>
				<view style="text-indent: 2em;">
					我们将通过<text class="text-blue">《用户协议》</text>和<text class="text-blue">《隐私政策》</text>，帮助您了解我们为您提供的服务、我们如何处理个人信息以及您享有的权利。我们会严格按照相关法律法规要求，采取各种安全措施来保护您的个人信息。
				</view>
				<view style="margin: 30rpx 0;">
					点击“同意”按钮，表示您已知情并同意以上协议和以下约定。
				</view>
			</view>



			<!-- <button class="btn" @click="closePopup">关闭</button>
			<button class="btn btn-confirm" @click="onConfirm">确定</button> -->
		</view>
	</view>
	<!-- 自动更新组件  -->
	<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
		:appstoreflag="true" :autocheckupdate="true"></zy-update>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
	const zyupgrade = ref(null);
	const isTarget = ref(false);

	const form = reactive({
		phone: "",
		password: ""
	})

	const showPopup = ref(false)

	function closePopup() {
		showPopup.value = false
	}

	function onConfirm() {
		uni.showToast({ title: '已确认', icon: 'success' })
		closePopup()
	}

	function isLength11(str) {
		return typeof str === 'string' && str.length === 11;
	}
	const jumpTo = (url : string) => {
		if (!form.password || !form.phone) {
			uni.showToast({
				title: "请完善信息",
				icon: 'error',
				duration: 2000
			})
		} else if (isLength11(form.phone)) {
			uni.showToast({
				title: "手机号不足11位",
				icon: 'error',
				duration: 2000
			})
		}
		else {

			uni.navigateTo({
				url: url
			});
		}
	}
	// 生命周期钩子
	onLoad(() => {

	});

	// 生命周期钩子
	onShow(() => {
		zyupgrade.value?.check_update()
	});
</script>

<style scoped lang="less">
	.backgroundContainer {
		display: flex;
		position: relative;
		width: 100%;
		height: 100vh;
		background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.6);
		background-blend-mode: screen;
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.title-img {
			width: 100rpx;
			height: 100rpx;
		}

		.title-font {
			margin-top: 40rpx;
			font-size: 34rpx;
			color: #333333;
			font-weight: 600;
		}

		.title-text {
			margin-left: 3rpx;
			margin-top: 5rpx;
			font-size: 23rpx;
			color: #777777;
			letter-spacing: 5rpx;
			margin-bottom: 80rpx;
		}

		.input-father {
			height: 90rpx;
			width: 550rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
		}

		.input-father-blue {
			margin-top: 100rpx;
			height: 90rpx;
			width: 550rpx;
			background: linear-gradient(to right, #00C9FF, #0076FF);
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.under-container-title {
		display: flex;
		margin-top: 80rpx;
		// margin-bottom: 40rpx;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;

		.radio-circle-blue {
			color: #0083FF;
			margin-top: 3rpx;
		}

		.radio-circle-font {
			color: #5A607F;
			// margin-left: 18rpx;
			margin-top: 3rpx;
		}

		.radio-circle {
			position: relative;
			margin-top: 2rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 2rpx solid #C0C5D9;
			background-color: transparent;
		}

		.radio-circle-target {
			position: relative;
			margin-top: 2rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 2rpx solid #C0C5D9;
			background-color: transparent;
		}

		.radio-circle-target::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 30rpx;
			height: 30rpx;
			background-color: #00C9FF;
			border-radius: 50%;
		}
	}

	.add {
		margin-left: 50rpx;
		font-size: 32rpx;
	}

	.shu {
		background-color: #d2d5d7;
		width: 2rpx;
		height: 35rpx;
		margin: 0 20rpx;
	}

	.password {
		font-size: 27rpx;
		margin-left: 30rpx;
		width: 100%;
	}

	.popup-wrapper {
		position: fixed;
		inset: 0;
		z-index: 1000;
	}

	.mask {
		position: absolute;
		inset: 0;
	}

	.box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 800rpx;
		height: 1000rpx;
		background: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 65rpx;

		.box-title {
			font-size: 35rpx;
			margin: 60rpx 0;
		}

		.font-father {
			line-height: 50rpx;
		}
		.text-blue{
			color: #0083FF;
		}
	}
</style>