<!-- 护嘱 -->
<template>
	<view class="right-container" :style="isshow?{opacity: `1`}:{opacity: `0`}">
		<view class="right-container-title-nav">
			<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
				ID：12345678
			</text>
			<text :class="darkFans?`right-container-title-no-dark`:`right-container-title-no`">
				名称：未命名01
			</text>

			<view class="right-icons">
				<image class="right-icons-img" :src="`/static/index/undericons/man.png`" />
				<view :class="darkFans?`right-icons-font-dark`: `right-icons-font` ">王金福</view>
				<image class="right-icons-img-icon"
					:src="darkFans?`/static/index/undericons/face.png`:`/static/index/undericons/facelight.png`" />
				<image class="right-icons-img-icon"
					:src="darkFans?`/static/index/undericons/hand.png`:`/static/index/undericons/handlight.png`" />
				<image class="right-icons-img-icon"
					:src="darkFans?`/static/index/undericons/out.png`:`/static/index/undericons/outlight.png`" />
			</view>
			<view class="right-container-title-class-anhei-button" @click="darkFanschange()" v-show="!darkFans">
				<text class="right-container-title-class-anhei">
					切换到暗黑模式
				</text>
			</view>
			<view class="right-container-title-class-anhei-button" :style="darkFans ? { backgroundColor:'#fff' } : {}"
				@click="darkFanschange()" v-show="darkFans">
				<text class="right-container-title-class-anhei" :style="darkFans ? { color: 'black' } : {}">
					取消暗黑模式
				</text>
			</view>
		</view>
		<view class="doctorsay-container">
			
		</view>
		<view class="right-container-sec">
			<view class="under-father">
				<view class="under-father-view" v-for="(item,index) in undericonList" :key="index"
					@click="changeMenuUnder(index)">
					<image class="under-father-light" src="/static/index/undericons/upguang.png"
						v-show="index === undermenuIndex" />
					<image class="under-father-img" :src="index === undermenuIndex ? item.targetUrl : item.url" />
					<view :class="darkFans? `under-father-img-font-dark`:`under-father-img-font`">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits } from 'vue';
	import type { roomBtttonType } from "./index";

	const props = defineProps({
		isshow: {
			type: Boolean,
			required: true,
		},
		darkFans: {
			type: Boolean,
			required: true,
		},
	});


	// 初始化下面侧单列表
	const undericonList = ref<roomBtttonType[]>([
		{ url: '/static/index/undericons/alarm.png', targetUrl: '/static/index/undericons/alarmdark.png', name: '服务考核' },
		{ url: '/static/index/undericons/linshitime.png', targetUrl: '/static/index/undericons/linshitimedark.png', name: '护理流程' },
		{ url: '/static/index/darkicon/zhaomingdark.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: '电子医嘱' },
		{ url: '/static/index/darkicon/kontiaodark.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: '进销存' },
		{ url: '/static/index/darkicon/nuanfengdark.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: '实时监控' },
		{ url: '/static/index/darkicon/dianqidark.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: '我的指令' },
	]);

	// 当前选中的菜单索引
	const undermenuIndex = ref<number>(0);
	// 暗黑模式
	// const darkFans = ref<boolean>(false);
	const underFans = ref<boolean>(false);
	// 当前选中的菜单索引
	const roomTar = ref<number[]>([]);
	const emit = defineEmits(['darkchange']);
	// 暗黑模式改变
	const darkFanschange = () => {
		emit('darkchange', !props.darkFans);
	}
	// 变更底部菜单
	const changeMenuUnder = (index : number) => {
		undermenuIndex.value = index;
	};


	// 生命周期钩子
	onMounted(() => {

	});
	// 在组件销毁时清除定时器
	onBeforeUnmount(() => {

	});
</script>

<style lang="less" scoped>
	.right-container {
		width: calc(100% - 235rpx);
		height: 100vh;
		transition: opacity 1s ease;
		.doctorsay-container{
			width: 1850rpx;
			height: 1220rpx;
			background-color: #fff;
			border-radius: 80rpx;
		}
		.right-container-sec {
			width: 100%;
			display: flex;
			position: relative;

			.under-father {
				position: fixed;
				bottom: 0;
				width: 100%;
				display: flex;
				align-items: center;
				width: 100%;
				height: 150rpx;

				.under-father-view {
					margin-left: 10rpx;
					margin-right: 150rpx;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.under-father-light {
						position: absolute;
						bottom: -20rpx;
						left: -90rpx;
						width: 300rpx;
						height: 200rpx;
					}

					.under-father-img {
						width: 80rpx;
						height: 80rpx;
						margin-left: -3rpx;
					}

					.under-father-img-font {
						font-size: 30rpx;
					}

					.under-father-img-font-dark {
						font-size: 30rpx;
						background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
						-webkit-background-clip: text;
						color: transparent;
					}
				}
			}
		}

		.right-container-title-nav {
			margin-top: 75rpx;
			margin-bottom: 20rpx;
			margin-left: 20rpx;

			.right-icons {
				display: flex;
				align-items: center;
				float: right;
				height: 70rpx;
				margin-right: 40rpx;

				.right-icons-font {
					margin-left: 10rpx;
					margin-right: 10rpx;
					font-size: 35rpx;
					margin-top: -30rpx;
				}

				.right-icons-font-dark {
					color: #fff;
					margin-left: 10rpx;
					margin-right: 10rpx;
					font-size: 35rpx;
					margin-top: -30rpx;
				}

				.right-icons-img {
					width: 80rpx;
					height: 80rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
					margin-top: -40rpx;

				}

				.right-icons-img-icon {
					width: 60rpx;
					height: 80rpx;
					margin-top: -10rpx;
					margin-left: 8rpx;
				}
			}

			.right-container-title-no {
				font-size: 35rpx;
				margin-right: 20rpx;
			}

			.right-container-title-no-dark {
				font-size: 35rpx;
				background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
				-webkit-background-clip: text;
				color: transparent;
				margin-right: 20rpx;
			}

			.right-container-title-class {
				font-size: 35rpx;
				font-weight: 800;
				margin-left: 20rpx;
			}

			.right-container-title-class-dark {
				font-size: 35rpx;
				font-weight: 800;
				margin-left: 20rpx;
				background: linear-gradient(to bottom, #FFFFFF, #B2C8E2);
				-webkit-background-clip: text;
				color: transparent;
			}

			.right-container-title-class-anhei-button {
				float: right;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				margin-right: 30rpx;
				width: 200rpx;
				height: 50rpx;
				background-color: black;
				border: 2rpx solid;

				.right-container-title-class-anhei {
					font-size: 20rpx;
					font-weight: 800;
					color: white;
				}
			}
		}
	}
</style>