<template>
	<div class="container">
		<view class="select" @click.stop>
			<view class="select-left" @click="isRuler=true" :style="!isRuler?{color:`black`,backgroundColor:`#fff`}:{}">
				列表
			</view>
			<view class="select-right" @click="isRuler=false"
				:style="isRuler?{color:`black`,backgroundColor:`#fff`}:{}">
				地图
			</view>
		</view>
		<!-- <view style="height: 80rpx;background-color: #E0E2E9;"></view> -->
		<view class="title-map" v-if="!isRuler">
			<view class="right-bad">
				<view>北</view>
				<image class="right-bad-img" src="https://www.focusnu.com/media/directive/index/zhinan.png" />
				<view>南</view>
			</view>
			<image class="title-img" src="https://www.focusnu.com/media/directive/index/map.png" />
		</view>
		<view class="list-father">
			<view v-for="(item,index) in institution" :key="index" class="card-father" @click="targetIndex=index">
				<view :class="targetIndex==index ? `card-target` : `card`">
					<image class="card-img" :src="targetIndex==index ?`https://www.focusnu.com/media/directive/index/jigou/bluewuzi.png`: `https://www.focusnu.com/media/directive/index/jigou/wuzi.png`" />
					<view v-if="targetIndex==index" class="abs-father">
						<image class="abs-img" src="https://www.focusnu.com/media/directive/index/jigou/bar.png" />
						<!-- <view class="abs-dui"></view> -->
						<image class="abs-dui" src="https://www.focusnu.com/media/directive/index/jigou/dui.png" />
					</view>
				</view>
				<view class="card-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="under-container-title">
			<view style="margin-left: 60rpx;" :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="jumpToPro">
				《护理单元使用条款》
			</view>
		</view>
		<view class="button-blue" @click="loginIt">
			一键登录
		</view>
		<view class="bgc-height">
			
		</view>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const isRuler = ref(false);
	const isTarget = ref(false);
	const targetIndex = ref(-1);
	
	const institution = ref([{
			name: "护理单元01",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元02",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元03",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元04",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元05",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元06",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元07",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元08",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元09",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元10",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元11",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元12",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
		{
			name: "护理单元13",
			width: "30",
			height: "30",
			top: "20",
			left: "0"
		},
	])
	const jumpToPro = () =>{
		uni.navigateTo({
			url: "/pages/login/protocol"
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: rgb(236,238,244);

		.select {
			position: absolute;
			left: 30rpx;
			top: 10rpx;
			width: 170rpx;
			height: 60rpx;
			border-radius: 20rpx;
			background-color: #01A8FF;
			z-index: 1;
			display: flex;
			border: 4rpx solid #01A8FF;

			.select-left {
				border-top-left-radius: 15rpx;
				border-bottom-left-radius: 15rpx;
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				color: #fff;
			}

			.select-right {
				border-top-right-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				color: #fff;
			}
		}

		.title-map {
			width: 100%;
			height: 650rpx;
			background-color: #E0E2E9;
			// margin-top: 50rpx;
			position: relative;

			.right-bad {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				width: 50rpx;
				height: 130rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				background-color: #fff;
				z-index: 1;
				border-radius: 20rpx;
				font-size: 23rpx;

				.right-bad-img {
					width: 30rpx;
					height: 55rpx;
				}
			}

			.title-img {
				width: 700rpx;
				height: 600rpx;
				margin-left: 25rpx;
				margin-top: 25rpx;
			}
		}
	}

	.list-father {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-top: 20rpx;
		background-color: #fff;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		.card-father {
			display: flex;
			width: 45%;
			margin: 0 2.5%;
			flex-direction: column;
			display: flex;
			justify-content: center;
			align-items: center;

			.card {
				width: 100%;
				height: 250rpx;
				background-color: #F8F9FD;
				border-radius: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.card-target {
				width: 100%;
				height: 250rpx;
				background-color: #F8F9FD;
				border-radius: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #0083FF ;
				position: relative;
				// overflow: hidden;
				.abs-father{
					width: 70rpx;
					height: 70rpx;
					position: absolute;
					bottom: -4rpx;
					right: -4rpx;
					.abs-img{
						width: 70rpx;
						height: 70rpx;
					}
					.abs-dui{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: 25rpx;
						left: 25rpx;
						// transform: translate(-50%,-50%);
						z-index: 1;
					}
				}
			}
			.card-img {
				width: 150rpx;
				height: 150rpx;
			}
			.card-name{
				color: #888FA9 ;
				margin: 20rpx 0;
			}
		}
	}
	.under-container-title {
		display: flex;
		margin-top: 40rpx;
		// margin-bottom: 150rpx;
		align-items: center;
		font-size: 25rpx;
		font-weight: 500;
		width: 100%;
		position: relative;
		.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%;
		}
		.radio-circle-blue {
			color: #0083FF;
			margin-top: 3rpx;
		}
	
		.radio-circle-font {
			color: #5A607F;
			// margin-left: 18rpx;
			margin-top: 3rpx;
		}
	}
	.button-blue {
		width: 80%;
		margin-left: 10%;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-radius: 43rpx;
		background: linear-gradient(to right, #00C9FF, #0076FF);
		color: #fff;
		font-size: 33rpx;
	}
	.bgc-height{
		height: 150rpx;
		width: 100%;
		// background: url(`https://www.focusnu.com/media/directive/index/jigou/bgc.png`);
		background-image: url('https://www.focusnu.com/media/directive/index/jigou/bgc.png');
		  background-size: 100% auto;        /* 宽度占满，高度自动 */
		  background-position: top center;
		  background-repeat: no-repeat;
		// margin-top: -50rpx;
	}
</style>