<!-- 护嘱 -->
<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="doctorsay-container-items">
				<view class="doctorsay-container-up">
					<view v-for="(item,index) in doctorsayList" :key="index" @click="upmenuIndex=index">
						<view class="doctorsay-container-card"
							:style="index === upmenuIndex ? {backgroundColor:`#0184db`} : {}">
							<image class="doctorsay-container-card-img"
								:src="index === upmenuIndex ? item.targetUrl : item.url" />
							<view
								:class="(index === upmenuIndex) ? `doctorsay-container-card-font-dark`:`doctorsay-container-card-font`">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="doctorsay-container-down">
					<view class="doctorsay-top"></view>
					<scroll-view :scroll-y="canmove" class="doctorsay-container-scroll">
						<view v-for="(item,index) in downList" :key="index" class="doctorsay-container-button"	@touchstart="handleTouchStart(item,index)" @touchend="handleTouchEnd">
							<view class="doctorsay-container-button-gun" v-show="downmenuIndex===index"></view>
							<text :class="downmenuIndex===index?`doctorsay-container-text-target`:`doctorsay-container-text`"
							>{{item}}</text>
						</view>
					</scroll-view>
					<view class="doctorsay-top"></view>
				</view>
			</view>
			<view class="doctorsay-container-container">
				<view class="doctorsay-container-title">
					<view class="doctorsay-container-left">
						<view class="doctorsay-container-left-gun"></view>
						<view class="doctorsay-container-left-font">时间矩阵</view>
					</view>
					<view class="doctorsay-container-right">
						2
					</view>
				</view>
			</view>

		</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,
		},
		canmove:{
			type: Boolean,
			required: true,
		}
	});
	//左下的数组
	const downList = ref<String[]>([
		"口腔清洁啊",
		"头部清洁",
		"面部清洁",
		"躯干清洁",
		"四肢清洁",
		"会阴清洁",
		"肛周清洁",
		"手清洁",
		"足清洁",
		"剃须",

		"口腔清洁",
		"头部清洁",
		"面部清洁",
		"躯干清洁",
		"四肢清洁",
		"会阴清洁",
		"肛周清洁",
		"手清洁",
		"足清洁",
		"剃须",
	])
	// 初始化下面侧单列表
	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 doctorsayList = ref<roomBtttonType[]>([
		{ url: '/static/index/doctorsay/light/clean.png', targetUrl: '/static/index/doctorsay/dark/clean.png', name: '清洁' },
		{ url: '/static/index/doctorsay/light/drink.png', targetUrl: '/static/index/doctorsay/dark/drink.png', name: '饮食' },
		{ url: '/static/index/doctorsay/light/bed.png', targetUrl: '/static/index/doctorsay/dark/bed.png', name: '睡眠' },
		{ url: '/static/index/doctorsay/light/shi.png', targetUrl: '/static/index/doctorsay/dark/shi.png', name: '排便' },
		{ url: '/static/index/doctorsay/light/use.png', targetUrl: '/static/index/doctorsay/dark/use.png', name: '日常' },

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

	const timer = ref(null);//计时器
	//长按开始
	const handleTouchStart = (item:string,index : number) => {
		timer.value = setTimeout(() => {
			downmenuIndex.value = index
			emit('savename', item);
		}, 500);
	}
	// 触摸松开，清除定时器
	const handleTouchEnd = () => {
		if (timer.value) {
			clearTimeout(timer.value);
			timer.value = null;
		}
	};

</script>

<style lang="less" scoped>
	.right-container {
		width: calc(100% - 235rpx);
		height: 100vh;
		transition: opacity 1s ease;
		position: relative;
		.move-font{
			position: absolute;
			font-size: 35rpx;
			font-weight: 700;
		}
		.doctorsay-container-view {
			width: 100%;
			height: 1220rpx;
			display: flex;

			.doctorsay-container-items {
				width: 310rpx;
				height: 1220rpx;

				.doctorsay-container-up {
					display: flex;
					flex-wrap: wrap;
					.doctorsay-container-card {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						background-color: rgb(221, 234, 250);
						width: 130rpx;
						height: 130rpx;
						margin: 0 18rpx 15rpx 0rpx;
						border-radius: 30rpx;
						border: 2rpx solid rgb(221, 234, 250);
						box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); /* 右下角阴影 */
						.doctorsay-container-card-img {
							width: 75rpx;
							height: 75rpx;
						}

						.doctorsay-container-card-font {
							font-size: 26rpx;
						}

						.doctorsay-container-card-font-dark {
							font-size: 26rpx;
							color: #FFFFFF;
						}
					}
				}

				.doctorsay-container-down {
					background-color: rgb(221, 234, 250);
					width: 290rpx;
					height: 770rpx;
					border-radius: 40rpx;
					margin-top: 0rpx;
					box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); /* 右下角阴影 */
					.doctorsay-container-scroll {
						height: 690rpx;
					}

					.doctorsay-top {
						height: 40rpx;
					}

					.doctorsay-container-button {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 85rpx;
						font-size: 35rpx;
						font-weight: 700;
						position: relative;
						.doctorsay-container-text-target{
							color:#016AD1;
							background-color: #c9e8ff;
							padding: 10rpx 30rpx;
							border-radius: 40rpx;
							border: 2rpx solid #fff;
							font-size: 40rpx;
						}
						.doctorsay-container-button-gun {
							position: absolute;
							top: 22rpx;
							left: 1rpx;
							width: 10rpx;
							height: 42rpx;
							background: linear-gradient(to bottom, #04BCED, #0160CE);
							border-radius: 10rpx;
						}
					}
				}
			}

			.doctorsay-container-container {
				width: 1730rpx;
				height: 1220rpx;
				background-color: rgba(255, 255, 255, 0.7);
				border-radius: 60rpx;
				box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); /* 右下角阴影 */
				overflow: hidden;
				.doctorsay-container-title{
					width: 100%;
					height: 130rpx;
					background-color: #c9e8ff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.doctorsay-container-left{
						display: flex;
						.doctorsay-container-left-gun{
							margin-left: 40rpx;
							margin-right: 20rpx;
							width: 13rpx;
							height: 55rpx;
							background: linear-gradient(to bottom, #04BCED, #0160CE);
							border-radius: 10rpx;
						}
						.doctorsay-container-left-font{
							font-size: 42rpx;
							font-weight: 700;
						}
					}
				}
			}
		}

		.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>