<template>
	<view class="font-father">
		<image class="title-img"
			:src="`https://www.focusnu.com/media/directive/login/introduce/selectbgc.png`" />
		<view class="font-title" v-if="phonenumber">
			<view style="display: flex;">
				<text>尊敬的用户，你的手机</text><text style="color: #259AFB;">{{ maskPhone(phonenumber) }}</text>
			</view>
			<view class="big-font">
				已成功绑定
			</view>
			<view class="">
				欢迎加入护理单元大家庭!
			</view>
		</view>
		
		
		<view class="font-title" v-if="!phonenumber">
			尊敬的用户，你的机构加盟申请已成功提交，请耐心等待审核结果，期待您早日加入护理单元大家庭！
		</view>
		<view style="width: 100%;z-index: 999;">
			<view class="bottom-button" @click="jumpto">
				我的机构
			</view>
		</view>
		<view class="white-father-spec">
			<image class="white-imge-spec"  src="https://www.focusnu.com/media/directive/login/introduce/oldman.png" />
			<view class="weight-font">
				长者入住
			</view>
		</view>

		<view v-for="(item,index) in cardarray" :key="index" style="width: 100%;">
			<view class="white-card">
				<view class="white-left">
					<view class="white-title">
						{{item.title}}
					</view>
					<view class="white-text">
						{{item.content}}
					</view>
				</view>
				<image class="white-right"
					:src="`https://www.focusnu.com/media/directive/login/introduce/${index}.png`" />
			</view>
		</view>

		<view class="white-father">
			<image class="white-imge" src="https://www.focusnu.com/media/directive/login/introduce/nurse.png" />
			<view class="weight-font">
				员工入驻
			</view>
			<view class="gray-font">
				入驻护理单元，遵循标准护理流程，提供长者床旁照护用专业技能与人文关怀共同守护长者健康。依托物联设备优化服务流程，依托员工培训提升照护能力，确保服务精准高效。
			</view>
		</view>

		<view class="white-father" style="margin-bottom: 50rpx;">
			<image class="white-imge" src="https://www.focusnu.com/media/directive/login/introduce/jigou.png" />
			<view class="weight-font">
				机构加盟
			</view>
			<view class="gray-font">
				加盟护理单元，坐拥成熟运营体系，精简人力配置，降低运营成本。优质资源共享，多重优势协同发力，全方位拓宽利润空间，助力占领银发赛道。
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		// getOpenid,
		getMessage
	} from '@/api/loginApi.js'

	const cardarray = [{
			title: "日常照料:专业规范，细致周全",
			content: "提供专业日常、饮食、清洁、睡眠、排泄等照料服务，长者舒适安心。"
		},
		{
			title: " 健康监测：实时监测、精准应对",
			content: "7*24小时生命体征监测，专业方案提前防控，健康风险提早化解。"
		},
		{
			title: " 医护照料：多专联合，专业护航",
			content: "医疗、护理团队协同合作，守护长者身体安康。"
		},
		{
			title: "康复护理：科学规划，有效复健",
			content: "量身定制护理流程，科学手段实施精准干预，为长者健康保驾护航。"
		},
		{
			title: "贴心关怀：温暖陪伴、心灵慰藉",
			content: "护理员床前陪伴、耐心疏导，让长者感受家的温暖与关怀。"
		},
	]
	const phonenumber = ref("");
	const jumpto = () => {
		getMessage(uni.getStorageSync("openid")).then(res => {
			if (!res.result.tel) {
				uni.redirectTo({
					url: `/pages/login/index`
				});
			} else {
				uni.setStorageSync('tel', res.result.tel);
				uni.setStorageSync('token', res.result.token);
				uni.setStorageSync('serverUrl', res.result.serverUrl);
				uni.setStorageSync('izJg', res.result.izJg);
				uni.setStorageSync('izJs', res.result.izJs);
				uni.setStorageSync('izYg', res.result.izYg);
				switch (res.result.advisoryType) {
					case `1`:
						uni.redirectTo({
							url: `/pages/login/threeselectone`
						});
						break;
					case `2`:


						break;
					case `3`:
						uni.redirectTo({
							url: `/pages/index/index`
						});
						break;
					default:
						uni.redirectTo({
							url: `/pages/login/threeselectone`
						});
				}
			}
		})
		// uni.redirectTo({
		// 	url: `/pages/login/callback`
		// });
	}

	function maskPhone(phone) {
		return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
	}
	onLoad((options) => {
		if (!options.type) {
			phonenumber.value = uni.getStorageSync('tel')
		}
	})
</script>

<style lang="scss" scoped>
	.font-father {
		width: 100%;
		min-height: 100vh;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		background-color: rgb(239, 239, 239);
		
		.white-father-spec {
			width: 100%;
			background-color: #fff;
			border-radius: 40rpx;
			margin-top: 50rpx;
			position: relative;
			// padding: 10rpx 2%;
		
		
			.white-imge-spec  {
			
				width: 100%;
				margin: 0 auto;
				height: 200rpx;
				margin-top: 7rpx;
			}
		
			.weight-font {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 60rpx;
				font-size: 35rpx;
				font-weight: 600;
				// margin-top: 30rpx;
				// margin-bottom: 30rpx;
			}
		
			.gray-font {
				color: #999999;
				margin-top: 30rpx;
			}
		}
		
		.white-father {
			width: 100%;
			background-color: #fff;
			border-radius: 40rpx;
			margin-top: 30rpx;
			padding: 30rpx 30rpx;


			.white-imge {

				width: 635rpx;
				margin: 0 auto;
				height: 200rpx;
			}

			.weight-font {
				// margin-left: 7%;
				font-size: 35rpx;
				font-weight: 600;
				margin-top: 30rpx;
				// margin-bottom: 30rpx;
			}

			.gray-font {
				color: #999999;
				margin-top: 30rpx;
			}
		}

		.font-title {
			margin-top: 200rpx;
			margin-bottom: 0rpx;
			font-weight: 600;
			font-size: 32rpx;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.bottom-button {
			margin-top: 50rpx;
			margin-bottom: 0;
			width: 250rpx;
			margin-left: 30rpx;
			height: 80rpx;
			border-radius: 50rpx;
			background: linear-gradient(to left, #00C9FF, #0076FF);
			color: #fff;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// z-index: 999;
		}
	}

	.white-card {
		width: 100%;
		height: 230rpx;
		background-color: #fff;
		margin-top: 25rpx;
		border-radius: 30rpx;
		// box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;

		.white-left {
			width: 80%;
			padding-left: 8%;

			// padding-left: 60rpx;
			.white-title {
				font-size: 30rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.white-text {
				color: #999999;
				flex-wrap: wrap;
			}
		}

		.white-right {
			// width: 12%;
			margin-left: 2%;
			width: 85rpx;
			height: 85rpx;
		}
	}
	.title-img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
	}
	.big-font{
		font-size: 70rpx;
		color: black;
		margin: 10rpx 0;
	}
</style>