<!-- 主页 -->
<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="right-container-fir">
			<view :class="isPopupVisible ?`right-container-big`:`right-container-small`"
				:style="isPopupVisiblefiropen || isPopupVisible?{zIndex:999}:{zIndex:998}"
				class="right-container-fir-left-nav">
				<view :class="darkFans?`right-container-fir-left-card-dark`:`right-container-fir-left-card`">
					<image class="right-container-fir-left-card-hulilei" :src="`/static/index/hulilei.png`" />
					<div class="right-container-fir-left-card-hulilei-font" @click="showPopup">护理类</div>
					<image v-if="darkFans" class="card-upfaguang" :src="`/static/index/cardbgc/uplight.png`" />
					<view class="right-container-fir-left-carousel">
						<view class="carousel">
							<view class="dots">
								<span v-for="(item, index) in [1, 2, 3]" :key="index" :class="darkFans?`dot-dark`:`dot`"
									:style="index===firstcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
							</view>

						</view>
					</view>
					<view class="right-container-fir-left-card-main">
						<swiper :current="firstcurrentIndexup" class="swiper savehundred" circular
							:indicator-dots="false" :vertical="true" :interval="4000" :duration="500"
							@change="onSwiperChange">
							<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
								<view class="right-container-fir-left-card-flex">
									<view class="uni-margin-wrap-fir">

										<swiper :current="firstcurrentIndex" class="swiper" circular
											:indicator-dots="false" :interval="4000" :duration="500">
											<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
												:key="index">
												<view class="right-container-fir-left-card-card">
													<view class="right-container-fir-left-card-zhixing">
														<div class="right-container-fir-left-card-zhixing-font">待执行
														</div>
													</view>
													<image class="right-container-fir-left-card-img"
														:src="`/static/index/teeth.png`" @click="showPopup" />
													<view class="right-container-fir-left-card-main-laba-video">
														<image class="right-container-fir-left-card-main-laba"
															:src="darkFans?`/static/index/darkicon/labadark.png`:`/static/index/laba.png`" />
														<text
															:class="darkFans?`right-container-fir-left-card-main-font-dark`:`right-container-fir-left-card-main-font`">
															准备洁具（口腔）
														</text>
														<image class="right-container-fir-left-card-main-video"
															:src="darkFans?`/static/index/indexvideo.png`:`/static/index/indexvideo.png`" />
													</view>
												</view>
												<view class="split-line">
												</view>
												<view class="time-tra-fir">
													<view :class="darkFans?`time-font-dark`:`time-font`">
														10:00 - 10:10
													</view>
													<view :class="darkFans?`time-text-dark`:`time-text`">
														为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
													</view>
													<view class="time-people-two">
														<view class="time-people-fir">
															<image class="time-people-img"
																:src="darkFans?`/static/index/darkicon/zhixingpeopledark.png`:`/static/index/cardicons/zhixing.png`" />
															<text
																:class="darkFans?`time-people-font-dark`:`time-people-font`">
																单人执行
															</text>
														</view>
														<view class="time-people-sec">
															<image class="time-people-img"
																:src="darkFans?`/static/index/medium/dopeopledark.png`:`/static/index/cardicons/zhifa.png`" />
															<text
																:class="darkFans?`time-people-font-dark`:`time-people-font`">
																--
															</text>
														</view>
													</view>

													<view class="time-button-view">
														<view class="time-button-start">
															开始服务
														</view>
														<view
															:class="darkFans?`time-button-end-dark`:`time-button-end`">
															服务结束
														</view>
													</view>
												</view>

											</swiper-item>
										</swiper>

									</view>
									<view class="split-line-white-right-left"
										:style="darkFans ?  `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">

										<image v-if="darkFans" class="split-line-white-img"
											:src="`/static/index/cardbgc/leftlight.png`" />
									</view>
								</view>
							</swiper-item>
						</swiper>
						<view class="right-huli-sec">
							<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
							<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true"
								class="right-huli-view">
								<view v-for="(item,index) in huliList" :key="index" class="right-huli-view-dis"
									@click="openhuliList(index)">
									<image class="right-huli-img" :src="item.url" />
									<text class="right-huli-text">{{item.name}}</text>
								</view>
							</scroll-view>
							<!-- 暗黑模式 -->
							<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true"
								class="right-huli-view">
								<view v-for="(item,index) in huliListDark" :key="index" class="right-huli-view-dis">
									<image class="right-huli-img" :src="item.url" />
									<text class="right-huli-text-dark">{{item.name}}</text>
								</view>
							</scroll-view>
							<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
						</view>
					</view>
				</view>
			</view>
			<view :class="darkFans?`right-container-fir-right-dark`:`right-container-fir-right`">
				<view class="right-container-card">
					<view class="right-container-card-right">
						<view class="" v-for="(item,index) in [1,2,3,4]" :key="index">
							<image class="right-container-card-right-img" src="/static/index/customer.png" />
						</view>
					</view>
					<text :class="darkFans?`right-container-title-dark`:`right-container-title`">
						{{ currentTime }}
					</text>
					<text :class="darkFans?`right-container-date-dark`:`right-container-date`">
						{{ fullDate }}
					</text>
					<text :class="darkFans?`right-container-day-dark`:`right-container-day`">
						{{ weekDay }}
					</text>
					<view class="right-container-tem">
						<image class="right-container-tem-img"
							:src="darkFans?`/static/index/darkicon/wendudark.png`:`/static/index/roomicons/wendu.png`" />
						<text :class="darkFans?`right-container-tem-text-dark`:`right-container-tem-text`">23°C</text>
						<image class="right-container-tem-img"
							:src="darkFans?`/static/index/roomicons/shidu.png`:`/static/index/darkicon/shidudark.png`" />
						<text :class="darkFans?`right-container-tem-text-dark`:`right-container-tem-text`">39%</text>
					</view>
					<!-- 分割线 -->
					<view class="right-container-fenge"></view>

					<view class="right-container-button" v-if="!darkFans">
						<view v-for="(item,index) in roomBtttonList" :key="index" class="right-container-button-any">
							<image v-show="roomTar.includes(index)" class="right-container-button-ray"
								:src="`/static/index/cardicons/ray2.png`" />
							<image class="right-container-button-img"
								:src="roomTar.includes(index)?item.targetUrl : item.url" @click="saveItem(index)" />
							<text class="right-container-button-text"
								:style="roomTar.includes(index)?{color: '#167ED7'}:{}">{{item.name}}</text>
						</view>
					</view>
					<!-- 暗黑模式 -->
					<view class="right-container-button" v-if="darkFans">
						<view v-for="(item,index) in roomBtttonListdark" :key="index"
							class="right-container-button-any">
							<image v-show="roomTar.includes(index)" class="right-container-button-ray"
								:src="`/static/index/cardicons/ray2.png`" />
							<image class="right-container-button-img"
								:src="roomTar.includes(index)?item.targetUrl : item.url" @click="saveItem(index)" />
							<text class="right-container-button-text"
								:style="roomTar.includes(index)?{color: '#167ED7'}:{color: '#fff'}">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="right-container-sec">
			<view :class="isPopupVisiblesec ?`right-container-left-big`:`right-container-left-small`"
				:style="isPopupVisiblefiropensec || isPopupVisiblesec?{zIndex:999}:{zIndex:0}">
				<view :class="darkFans?`right-container-left-dark`:`right-container-left`">
					<image class="right-container-left-type" :src="`/static/index/yiliao/yiliaolei.png`" />
					<div class="right-container-left-font" @click="showPopupsec">医疗类</div>
					<view class="right-container-fir-left-carousel">
						<view class="carousel">
							<view class="dots">
								<span v-for="(item, index) in [1, 2, 3]" :key="index" :class="darkFans?`dot-dark`:`dot`"
									:style="index===secondcurrentIndexup?{backgroundColor:`#01A0FE`}:{}"></span>
							</view>
						</view>
					</view>
					<image v-if="darkFans" class="card-upfaguang-down" :src="`/static/index/cardbgc/uplight.png`" />
					<swiper :current="secondcurrentIndexup" class="swiper savehundred" circular :indicator-dots="false"
						:vertical="true" :interval="4000" :duration="500" @change="onSwiperChangesec">
						<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
							<div class="right-container-fir-left-card-flex-sec">
								<view class="uni-margin-wrap">
									<swiper :current="secondcurrentIndex" class="swiper" circular
										:indicator-dots="false" :autoplay="false" :interval="4000" :duration="500">
										<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]"
											:key="index">
											<div class="right-container-left-font-spec">进行中
											</div>
											<view class="time-tra-sec">
												<view :class="darkFans?`time-font-dark`:`time-font`">
													10:00 - 10:10
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/doctorsaydark.png`:`/static/index/medium/doctorsay.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														医嘱类型:药品
													</text>
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/howtododark.png`:`/static/index/medium/howtodo.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														处置方式:肌肉注射
													</text>
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/useMed.png`:`/static/index/medium/yongyao.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														用药类型:抗生素类
													</text>
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/domanydark.png`:`/static/index/medium/domany.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														执行方式:周期一日执行一次
													</text>
												</view>
												<view class="time-people-thi">
													<image class="time-people-img"
														:src="darkFans?`/static/index/darkicon/zhixingpeopledark.png`:`/static/index/cardicons/zhixing.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														单人执行
													</text>
													<image class="time-people-img"
														:src="darkFans?`/static/index/medium/dopeopledark.png`:`/static/index/cardicons/zhifa.png`" />
													<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
														赵宇
													</text>
												</view>
												<view class="time-button-view">
													<view class="time-button-start">
														开始服务
													</view>
													<view :class="darkFans?`time-button-end-dark`:`time-button-end`">
														服务结束
													</view>
												</view>
											</view>
											<view class="right-container-photo">
												<image class="right-container-photo-img"
													:src="`/static/index/yiliao/project2.png`" @click="showPopupsec" />
												<text
													:class="darkFans?`right-container-photo-text-dark`:`right-container-photo-text`">
													脑膜炎(1/2)
												</text>
											</view>
										</swiper-item>
									</swiper>
								</view>
							</div>
						</swiper-item>
					</swiper>
					<view class="split-line-white-sec"
						:style="darkFans ?  `background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #386997 50%, rgba(0, 0, 0, 0) 100%);`:``">
						<image v-if="darkFans" class="split-line-white-img"
							:src="`/static/index/cardbgc/leftlight.png`" />
					</view>
					<view class="right-huli-fir">
						<image class="right-huli-shang" :src="`/static/index/hulilist/shang.png`" />
						<scroll-view v-if="!darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
							<view v-for="(item,index) in mediumList" :key="index" class="right-huli-view-dis">
								<image class="right-huli-img" :src="item.url" />
								<text class="right-huli-text">{{item.name}}</text>
								<div class="progress-bar-container" v-show="item.number !== 0">
									<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
								</div>
							</view>
						</scroll-view>
						<scroll-view v-if="darkFans" :show-scrollbar="false" scroll-y="true" class="right-huli-view">
							<view v-for="(item,index) in mediumListdark" :key="index" class="right-huli-view-dis">
								<image class="right-huli-img" :src="item.url" />
								<text class="right-huli-text-dark">{{item.name}}</text>
								<div class="progress-bar-container" v-show="item.number !== 0">
									<div :style="{width:`${item.number}%`}" class="progress-bar"></div>
								</div>
							</view>
						</scroll-view>
						<image class="right-huli-xia" :src="`/static/index/hulilist/xia.png`" />
					</view>
				</view>
			</view>
			<view :style="isPopupVisiblefiropenthi || isPopupVisiblethi?{zIndex:999}:{zIndex:0}"
				:class="[ isPopupVisiblethi ? 'right-container-right-big' : 'right-container-right-small',]">


				<view :class="[ darkFans ? 'right-container-right-father-dark' : 'right-container-right-father']">
					<view class="right-container-right-down-father">
						<div class="right-container-fir-left-card-flex-sec">
							<image class="right-container-fir-left-card-flex-sec-img"
								:src="`/static/index/baojielei.png`" />
							<div class="right-container-fir-left-card-flex-sec-font" @click="showPopupthi">保洁类</div>

							<image class="right-container-fir-left-card-flex-sec-imgright-fir"
								:src="`/static/index/baojieleft.png`" />
							<image class="right-container-fir-left-card-flex-sec-imgright-sec"
								:src="`/static/index/baojieright.png`" />
							<view class="uni-margin-wrap">
								<swiper :current="secondcurrentIndex" class="swiper" circular :indicator-dots="false"
									:autoplay="false" :interval="4000" :duration="500">
									<swiper-item class="swiper-item-flex" v-for="(item,index) in [1,2 ,3]" :key="index">
										<view class="time-tra-thi">
											<view class="time-tra-thi-zhixing">
												<div class="time-tra-thi-zhixing-font">待执行
												</div>
											</view>
											<view :class="darkFans?`time-font-dark`:`time-font`">
												10:00 - 10:10
											</view>
											<view :class="darkFans?`time-text-dark`:`time-text`">
												为老人提供口腔清洁器具，牙膏、牙刷及水杯，看护完成
											</view>
											<view class="time-people-two">
												<image class="time-people-img"
													:src="darkFans?`/static/index/darkicon/zhixingpeopledark.png`:`/static/index/cardicons/zhixing.png`" />
												<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
													单人执行
												</text>
												<image class="time-people-img"
													:src="darkFans?`/static/index/medium/dopeopledark.png`:`/static/index/cardicons/zhifa.png`" />
												<text :class="darkFans?`time-people-font-dark`:`time-people-font`">
													王金福 / 李贵田
												</text>
											</view>
											<view class="time-button-view">
												<view class="time-button-start">
													开始服务
												</view>
												<view :class="darkFans?`time-button-end-dark`:`time-button-end`">
													服务结束
												</view>
											</view>
										</view>
										<view class="time-tra-thi-photo">
											<image class="time-tra-thi-photo-img" :src="`/static/index/project3.png`"
												@click="showPopupthi" />
											<text
												:class="darkFans?`time-tra-thi-photo-font-dark`:`time-tra-thi-photo-font`">
												更换纸尿裤
											</text>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</div>
					</view>
				</view>
			</view>
			<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>
		<Drawer ref="drawer">
			<view class="draw-all">
				<view class="draw-title">
					<view class="draw-title-gun"></view>
					<view class="draw-title-font">转单执行</view>
				</view>

				<view class="draw-contain">
					<view class="container-father">
						<view class="draw-contain-white-sha"></view>
						<view class="container">
							<div class="line" :style="{width: lineWidth}"></div>
							<div class="line-gray"></div>
							<template v-for="(item, index) in circles" :key="index">
								<div :class="circlesNumber>=index?  `outer-circle-target`:`outer-circle`"
									@click="circlesNumber=index">
									<div :class="circlesNumber>=index?  `inner-circle-target`:`inner-circle`">
										<span>{{ item.label }}</span>
									</div>
								</div>
							</template>
						</view>
						<view class="draw-contain-gray"></view>
						<view class="draw-contain-white"></view>
					</view>

				</view>
			</view>
		</Drawer>
	</view>

</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits } from 'vue';
	import type { huliListType, medType, roomBtttonType } from "./index";
	import Drawer from '../public/Drawer.vue';
	//抽屉开启
	const drawer = ref(null);
	const circles = [
		{ label: '指令' },
		{ label: '转单' },
		{ label: '完成' }
	];
	// 计算宽度
	const lineWidth = computed(() => {
		switch (circlesNumber.value) {
			case 0:
				return '0';
			case 1:
				return 'calc(100% - 600rpx)';
			case 2:
				return 'calc(100% - 120rpx)';
			default:
				return '100%';
		}
	});
	const circlesNumber = ref(0);
	const props = defineProps({
		isshow: {
			type: Boolean,
			required: true,
		},
		darkFans: {
			type: Boolean,
			required: true,
		},
	});
	//点击后动画效果（左上角）
	const isPopupVisible = ref(false);
	const isPopupVisiblefiropen = ref(false);

	//点击后动画效果（左下角）
	const isPopupVisiblesec = ref(false);
	const isPopupVisiblefiropensec = ref(false);

	//点击后动画效果（右下角）
	const isPopupVisiblethi = ref(false);
	const isPopupVisiblefiropenthi = ref(false);
	// 定义响应式数据现在时间
	const currentTime = ref('');
	const fullDate = ref('');
	const weekDay = ref('');

	// 初始化下面侧单列表
	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 huliList = ref<huliListType[]>([
		{ url: '/static/index/hulilist/zhuandan.png', name: "转单执行" },
		{ url: '/static/index/hulilist/xiezhu.png', name: "协助执行" },
		{ url: '/static/index/hulilist/zhongdian.png', name: "重点追踪" },
	]);
	// 初始化第一个卡片列表 暗黑模式
	const huliListDark = ref<huliListType[]>([
		{ url: '/static/index/darkicon/zhuandandark.png', name: "转单执行" },
		{ url: '/static/index/darkicon/xiezhudark.png', name: "协助执行" },
		{ url: '/static/index/darkicon/zhongdiandark.png', name: "重点追踪" },
	]);
	// 初始化第二排第一个卡片列表
	const mediumList = ref<medType[]>([
		{ url: '/static/index/medium/yaopin.png', name: "药品信息", number: 0 },
		{ url: '/static/index/medium/qingling.png', name: "请领指令", number: 60 },
		{ url: '/static/index/medium/peiyao.png', name: "配药指令", number: 100 },
		{ url: '/static/index/medium/xinxi.png', name: "信息反馈", number: 0 },
		{ url: '/static/index/medium/xinxi.png', name: "信息反馈2", number: 0 },
	]);
	// 初始化第二排第一个卡片列表 暗黑模式
	const mediumListdark = ref<medType[]>([
		{ url: '/static/index/darkicon/yaopindark.png', name: "药品信息", number: 55 },
		{ url: '/static/index/darkicon/qinglingdark.png', name: "请领指令", number: 10 },
		{ url: '/static/index/darkicon/peiyaodark.png', name: "配药指令", number: 100 },
		{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈", number: 15 },
		{ url: '/static/index/darkicon/xinxidark.png', name: "信息反馈2", number: 20 },
	]);


	// 初始化第二个卡片列表
	const roomBtttonList = ref<roomBtttonType[]>([
		{ url: '/static/index/roomicons/zhaoming.png', targetUrl: '/static/index/roomicons/zhaomingtar.png', name: "照明" },
		{ url: '/static/index/roomicons/kongtiao.png', targetUrl: '/static/index/roomicons/kongtiaotar.png', name: "空调" },
		{ url: '/static/index/roomicons/nuanfeng.png', targetUrl: '/static/index/roomicons/nuanfengtar.png', name: "暖风" },
		{ url: '/static/index/roomicons/dianqi.png', targetUrl: '/static/index/roomicons/dianqitar.png', name: "电器" },
	]);
	// 初始化第二个卡片列表 暗黑模式
	const roomBtttonListdark = ref<roomBtttonType[]>([
		{ 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 menuIndex = ref<number>(0);
	const undermenuIndex = ref<number>(0);
	// 暗黑模式
	// const darkFans = ref<boolean>(false);
	const underFans = ref<boolean>(false);
	// 当前选中的菜单索引
	const roomTar = ref<number[]>([]);
	//滑块按钮
	const firstcurrentIndex = ref<number>(0);
	const firstcurrentIndexup = ref<number>(0);
	const secondcurrentIndexup = ref<number>(0);
	const secondcurrentIndex = ref<number>(0);
	const thirdcurrentIndex = ref<number>(0);
	const emit = defineEmits(['darkchange']);
	// 暗黑模式改变
	const darkFanschange = () => {
		emit('darkchange', !props.darkFans);
	}
	// 变更菜单
	const changeMenu = (index : number) => {
		menuIndex.value = index;
	};
	// 变更底部菜单
	const changeMenuUnder = (index : number) => {
		undermenuIndex.value = index;
	};
	const saveItem = (index : number) => {
		if (roomTar.value.includes(index)) {
			let array = []
			roomTar.value.forEach((res : number) => {
				if (res !== index) {
					array.push(res)
				}
			})
			roomTar.value = array
		} else {
			roomTar.value.push(index)
		}
	}
	// 更新时间、日期和星期的方法
	const updateTime = () => {
		const now = new Date();

		// 获取当前时间的时分
		const hours = now.getHours().toString().padStart(2, '0');
		const minutes = now.getMinutes().toString().padStart(2, '0');
		currentTime.value = `${hours}:${minutes}`;

		// 获取完整的日期（年/月/日）
		const year = now.getFullYear();
		const month = (now.getMonth() + 1).toString().padStart(2, '0');
		const day = now.getDate().toString().padStart(2, '0');
		fullDate.value = `${year}年${month}月${day}日`;

		// 获取星期几
		const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		const week = weekDays[now.getDay()];
		weekDay.value = week;
	};
	//给轮播图用的
	const onSwiperChange = (event : any) => {
		firstcurrentIndexup.value = event.detail.current;
	};
	const onSwiperChangesec = (event : any) => {
		secondcurrentIndexup.value = event.detail.current;
	};

	const jumpTonew = (path : string) => {
		const pages = getCurrentPages(); // 获取当前页面栈
		if (pages.length === 0) return; // 确保有页面
		const currentPage = pages[pages.length - 1]; // 获取当前页面
		const currentPath = '/' + currentPage.route; // 获取当前页面路径（带前缀 /）
		if ((currentPath !== path) && path) {
			uni.redirectTo({
				url: path
			});
		}
	}
	//动画的点击触发（左上角）

	const showPopup = () => {
		isPopupVisible.value = !isPopupVisible.value
		isPopupVisiblefiropen.value = true;
		isPopupVisiblesec.value = false;
		isPopupVisiblethi.value = false;
		setTimeout(() => {
			isPopupVisiblefiropen.value = false;
		}, 500)
	}
	//动画的点击触发（左下角）

	const showPopupsec = () => {
		isPopupVisiblesec.value = !isPopupVisiblesec.value;
		isPopupVisible.value = false;
		isPopupVisiblethi.value = false;
		isPopupVisiblefiropensec.value = true;
		setTimeout(() => {
			isPopupVisiblefiropensec.value = false;
		}, 500)
	}

	//动画的点击触发（右下角）
	const showPopupthi = () => {
		isPopupVisiblethi.value = !isPopupVisiblethi.value;
		isPopupVisiblefiropenthi.value = true;
		isPopupVisible.value = false;
		isPopupVisiblesec.value = false;
		setTimeout(() => {
			isPopupVisiblefiropenthi.value = false;
		}, 500)
	}
	let timerId = null;
	//点击左上角卡片的右侧菜单
	const openhuliList = (index : number) => {
		// console.log("????", index,drawer.value)
		drawer.value.openDrawer();
	}
	// 生命周期钩子
	onMounted(() => {
		timerId = updateTime();
		// 每秒更新一次时间
		setInterval(updateTime, 1000);
	});
	// 在组件销毁时清除定时器
	onBeforeUnmount(() => {
		clearInterval(timerId);
	});
</script>

<style lang="less" scoped>
	// 主页的css
	@import './index';

	// 抽屉的css
	.draw-all {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-top-left-radius: 80rpx;
		overflow: hidden;

		.draw-title {
			width: 100%;
			height: 170rpx;
			background: linear-gradient(to bottom, #dfecfa, #c9dbee);
			display: flex;

			.draw-title-gun {
				margin-top: 70rpx;
				margin-left: 40rpx;
				margin-right: 20rpx;
				width: 13rpx;
				height: 50rpx;
				background: linear-gradient(to bottom, #04BCED, #0160CE);
				border-radius: 10rpx;
			}

			.draw-title-font {
				margin-top: 68rpx;
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		.draw-contain {
			width: 100%;
			height: calc(100vh - 170rpx);
			background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.5);
			background-blend-mode: screen;

			.draw-contain-jindu {
				width: 100%;
				height: 250rpx;
				// background-color: red;
				display: flex;
				justify-content: center;
				align-items: center;
			}


		}

		.container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 1000rpx;
			height: 200rpx;
			margin: 0 auto;
			position: relative;

		}

		.outer-circle-target {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: rgba(2, 136, 217, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;
		}

		.outer-circle {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			// background: rgba(2, 136, 217, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;
		}

		.inner-circle-target {
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
			background: #0288D9;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			position: absolute;
			z-index: 3;
		}

		.inner-circle {
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
			background: #dfecfa;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			position: absolute;
			z-index: 3;
		}

		.inner-circle-target span {
			color: #fff;
			font-size: 26rpx;
			font-family: Arial, sans-serif;
			z-index: 4;
		}

		.inner-circle span {
			// color: #fff;
			font-size: 26rpx;
			font-family: Arial, sans-serif;
			z-index: 4;
		}

		.line {
			width: calc(100% - 120rpx);
			height: 15rpx;
			background: linear-gradient(to right, #0288D1, #0288D1);
			position: absolute;
			top: 50%;
			left: 60rpx;
			z-index: 1;
			border-radius: 5rpx;
			box-shadow:
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8),
				/* 内部高光 */
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.4),
				/* 内部阴影 */
				0 0 8rpx rgba(2, 136, 209, 0.8);
			/* 外部发光 */
			filter: brightness(1.2);
			z-index: 1;
			transition: width 0.5s ease; /* 设置宽度变化的过渡效果 */
		}

		.line-gray {
			width: calc(100% - 120rpx);
			height: 15rpx;
			background: #c9dbee;
			position: absolute;
			top: 50%;
			left: 60rpx;
			z-index: 0;
			border-radius: 5rpx;
			/* 外部发光 */
			filter: brightness(1.2);
		}

		.container-father {
			width: 100%;
			height: 200rpx;
			background-color: rgba(187, 203, 236, 0.6);

			.draw-contain-white-sha {
				width: 100%;
				height: 1rpx;
				background-color: #fff;
				box-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.2);
			}
		}

		.draw-contain-gray {
			width: 100%;
			height: 3rpx;
			background-color: #d0e0ef;
		}

		.draw-contain-white {
			width: 100%;
			height: 1rpx;
			background-color: #fff;
		}

	}
</style>