<template>
	<view class="all">
		<view class="all-title">
			<view class="rentou">
				<view class="rentou-left">
					<image class="rentou-left-img" src="/static/shouye/old.png" />

				</view>
				<view class="rentou-right">
					{{ uni.getStorageSync('realname') }}
				</view>
			</view>
			<view class="lingdang">
				<image class="lingdang-img" src="/static/shouye/lingdang.png" />
				<view class="hongdian"></view>
			</view>
		</view>
		<view class="all-menu">
			<view v-for="(item,index) in menuarray" :key="index" @click="clickleftmenu(index)">
				<view class="menu-one" :style="leftarraytarget===index?{backgroundColor:`#fff`}:{}">
					<image class="menu-one-img" :src="`/static/shouye/menu${index}.png`" />
				</view>
			</view>
		</view>
		<exit :show="exitshow" @close="exitshow=false" />
		<view class="right-content">
			<view class="yanfazhong" v-show="!leftarraytarget">
				研发中...
			</view>
			<view class="yanfazhong" v-show="leftarraytarget==3">
				研发中...
			</view>
			<view class="componentall" v-show="leftarraytarget==4">
				<menusettings :isShow="leftarraytarget==4" />
			</view>
			<view class="componentall" v-show="leftarraytarget==1 || leftarraytarget==2">
				<scroll-view scroll-y class="componentall" >
					<!-- 阻止scroll对容器样式的影响 {{item.nuName}}-->
					<view class="card-father">
						<view class="card"
						 :style="{border: cardtarget === index? '4rpx dashed #1083F8': '4rpx solid transparent',backgroundColor:cardtarget === index?`#F9FCFF`:``}"
						 v-for="(item,index) in cardarray" :key="index" @click="clickcard(index)">
							<view class="card-title">
								{{ item.areaFlag=="1"?`护理单元`:`库房` }}
							</view>
							<view style="display: flex;margin-top: 5%;">
								<view style="width: 50%;">
									<view style="color: #888888;">
										机构名称
									</view>
									<view class="card-contect">
										{{ item.nuName }}
									</view>
								</view>
								<view style="width: 50%;" v-if="item.areaFlag==`1`">
									<view style="color: #888888;">
										状态
									</view>
									<view class="card-contect">
										{{ item.elderId ? `已入驻`:`未入驻` }}
									</view>
								</view>
							</view>
							<view style="display: flex;margin-top: 5%;">
								<view style="width: 50%;">
									<view style="color: #888888;">
										摄影设备
									</view>
									<view class="card-contect">
										{{ item.cameraInfo? `运行中`:`离线` }}
									</view>
								</view>
								<view style="width: 50%;" v-if="item.areaFlag==`1`">
									<view style="color: #888888;">
										老人姓名
									</view>
									<view class="card-contect">
										{{ item.elderInfo?.name }}
									</view>
								</view>
								<view style="width: 50%;" v-if="item.areaFlag==`3`">
									<view style="color: #888888;">
										库管姓名
									</view>
									<view class="card-contect">
										{{ item.fzr }}
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</scroll-view>	
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, reactive } from 'vue';
	import { onShow, onLoad, onHide, onBackPress } from "@dcloudio/uni-app"
	import exit from "@/component/public/exit.vue"
	import menusettings from '@/pages/watch/settings/menusettings.vue'
	import { queryPadPageList } from '@/pages/watch/api/lunpan.js'

	const menuarray = ref(["", "", "", "", "", ""])
	const leftarraytarget = ref(0);
	// 我这么写是为了防止安卓组件被销毁
	onBackPress(() => {
		return true; // 禁止返回
	})
	const leftMenuArray = ref([])
	// 生命周期钩子
	onShow(() => {
		queryPadPageList().then((res => {
			leftMenuArray.value = res.result.records;
			
		}))
	});
	const filteredMenu = (index:number) => {
		return leftMenuArray.value.filter(item => Number(item.areaFlag) - 1 == index);
	}
	const clickcard = (index:number) => {
		if(cardtarget.value === index){
			jumptopage(index)
		}else{
			cardtarget.value = index;
		}
	}
	const jumptopage = (index:number) => {
		
		uni.setStorageSync('nuId', cardarray.value[index].nuId);
		uni.setStorageSync('nuName', cardarray.value[index].nuName);
		uni.setStorageSync('customerId', cardarray.value[index].elderInfo ? cardarray.value[index].elderInfo?.id : null);
		uni.setStorageSync('NUall', cardarray.value[index]);
		
		if (leftarraytarget.value===1) {
			uni.navigateTo({
				url: '/pages/NursingNew/index'
			})
		} else if (leftarraytarget.value===2) {
			uni.navigateTo({
				url: '/pages/Warehouse/warehome',
			})
		}
	}
	const exitshow = ref(false);
	const cardarray = ref([])
	
	const cardtarget = ref(-1);
	const clickleftmenu = (index : number) => {
		if (index === 5) {
			exitshow.value = true;
			return
		}
		cardtarget.value=-1
		if(index===1){
			cardarray.value = filteredMenu(0)
			// console.log("??11111111",cardarray.value)
		}else if(index===2){
			cardarray.value = filteredMenu(2)
			// console.log("??11111111",cardarray.value)
		}
		leftarraytarget.value = index;

	}
</script>

<style scoped lang="less">
	.all {
		width: 100%;
		height: 100vh;
		background-color: #eff0f4;


		.all-title {
			width: 100%;
			height: 13vh;
			padding: 0 3vw;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.rentou {
				height: 7vh;
				border-radius: 3vw;
				background-color: #E3E4E8;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.rentou-left {
					height: 7vh;
					width: 7vh;
					border-radius: 50%;
					background-color: #D6D7DF;
					margin-right: 0.5vw;
					position: relative;

					.rentou-left-img {
						position: absolute;
						left: 0vw;
						top: 0.8vw;
						height: 7vh;
						width: 7vh;
					}
				}

				.rentou-right {
					margin-right: 1vw;
				}
			}

			.lingdang {
				width: 5vh;
				height: 5vh;
				border-radius: 1.5vh;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 0.5vh;
				position: relative;

				.lingdang-img {
					width: 4vh;
					height: 4vh;
					margin-left: 0.2vh;
				}
			}
		}

		.right-content {
			width: 88%;
			margin-left: 10%;
			height: 86vh;
			display: flex;
			justify-content: center;
			align-items: center;

			.yanfazhong {
				font-size: 40rpx;
				margin-top: -10vh;
			}
		}
	}

	.hongdian {
		position: absolute;
		right: 0.6vh;
		top: 0.6vh;
		width: 1vh;
		height: 1vh;
		background-color: #FF5757;
		border-radius: 50%;
	}

	.all-menu {
		position: fixed;
		left: 3vw;
		top: 18vh;
		width: 5vw;

		.menu-one {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 3.8vw;
			width: 3.8vw;
			border-radius: 50%;
			margin-top: 1.2vw;

			.menu-one-img {
				height: 2.3vw;
				width: 2.3vw;
				margin-left: 0.1vw;
			}
		}
	}
	.componentall{
		width: 100%;
		height: 100%;
		// background-color: red;
	}
	.card-father{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		.card{
			width: 32%;
			margin-left: 1%;
			height: 32%;
			margin-top: 1%;
			background-color: #fff;
			border-radius: 23rpx;
			// padding: 5vw;
			padding: 1.5vw 2vw;
			.card-title{
				font-size: 35rpx;
				font-weight: 600;
			}
			.card-contect{
				font-size: 32rpx;
			}
		}
	}
</style>