<template>
	<view style="width: 100%">
		<view class="renwu">
			<view class="nav2">
				<u-tabs :list="list2" @click="click2" :activeStyle="{
            color: '#ffffff',
			width:'100%',
			height:'100%',
            fontWeight: 'bold',
			background:'#3c9cff',
            transform: 'scale(1.05)'
        }" lineHeight="0" :current="current2"
				></u-tabs>
			</view>
			<view class="" v-if="current2===0">
				<u-row customStyle="margin: 20rpx ">
					<u-col span="12">
						<u-empty v-if="planList.length == 0" mode="list"></u-empty>
						<u-cell-group customStyle="background-color: white;" v-else>
							<u-cell v-for="(item, index) in planList" size="large" 
							isLink clickable
								:title="item.name" 
								@click="handel_cell_click(item)">
							</u-cell>
						</u-cell-group>
						<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
					</u-col>
				</u-row>
			</view>
			<view class="" v-if="current2===1">
				<u-row customStyle="margin: 20rpx ">
					<u-col span="12">
						<u-empty v-if="tongzhiList.length == 0" mode="list"></u-empty>
						<u-cell-group customStyle="background-color: white;" v-else>
							<u-cell v-for="(item, index) in tongzhiList" size="large" 
							isLink clickable
								:title="getItemTitle(item)" 
								@click="handel_cell_click(item)">
								
							</u-cell>
						</u-cell-group>
						<!-- <uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" /> -->
					</u-col>
				</u-row>
			</view>
		</view>
		
	</view>
</template>


<script setup>
	import {
		onLoad,
		onShow,
		onHide,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	const currentTime = ref('');
	const current1 = ref(0);
	const current2 = ref(0);
		
	const list2 = reactive([
		{name:'任务计划'},
		{name:'任务通知'},
	])
	const planList = reactive([
		{name:'任务计划A',tel:'15111111111',id:1},
		{name:'任务计划B',tel:'18222221111',id:2},
		{name:'任务计划C',tel:'19666621111',id:3},
	])
	const tongzhiList = ref([
		{name:'李峰',louqu:'3#楼',room:'1008',chuang:'01'},
		{name:'邓丽',louqu:'3#楼',room:'1008',chuang:'02'},
		{name:'邓平',louqu:'3#楼',room:'1008',chuang:'03'},
	])
	const nextWeekDates = ref([]);
	onMounted(() => {
		updateTime(); // 初始更新时间
		generateDates()
		setInterval(updateTime, 60000); // 每分钟更新一次时间
	});

	onUnmounted(() => {
		// 清除定时器
		clearInterval(updateTime);
	});
	onShow(() => {})

	onHide(() => {})

	onReady(() => {})
	let finished = ref(false)
	let total = ref(0)
	let loadText = reactive({})

	// 计算属性
	let status = computed(() => {
		if (planList.length < total.value) {
			return "more";
		} else {
			finished.value = true;
			return "nomore";
		}
	});
//获取老人简介
	function getItemTitle(item) {
		let result = "";
		result += item.name + item.louqu+item.room+item.chuang+'号床';
		return result;
	}
	function updateTime() {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		const date = now.getDate();
		const day = now.getDay();
		const hours = now.getHours();
		const minutes = now.getMinutes();

		const dayOfWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
		const timeString =
			`${year}-${month.toString().padStart(2, '0')}-${date.toString().padStart(2, '0')} ${dayOfWeek[day]} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
		currentTime.value = timeString;
	}

	function getWeekday(date) {
		const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
		return weekdays[date.getDay()];
	};

	function generateDates() {
		const dates = [];
		let currentDate = new Date();
		for (let i = 0; i < 7; i++) {
			currentDate.setDate(currentDate.getDate() + 1);
			dates.push({
				// day: currentDate.toLocaleDateString(),
				name: getWeekday(currentDate),
			});
		}
		nextWeekDates.value = dates;
	};
	function open() {}
	function click(item) {
		console.log('item', item);
		current1.value = item.index
	}
	function click2(item) {
		console.log('item', item);
		current2.value = item.index
	}
	function handel_cell_click(item){
		console.log('item', item);
	}
</script>
<style lang="scss" scoped>
	page {
		background: #ffffff;
		font-size: 28rpx;
		color: #3d3d3d;
		min-height: 100vh;
		.renwu {
			/* #ifdef APP-PLUS || ANDROID */
			/* 安卓特有的样式 */
			padding-top: 80rpx;
			/* 红色字体 */
			/* #endif */
			/* #ifdef H5  */
			/* 安卓特有的样式 */
			padding-top: 30rpx;
			/* 红色字体 */
			/* #endif */
			.top {
				text-align: right;
				margin: 0 30rpx 10rpx;
				/* #ifdef APP-PLUS || ANDROID */
				/* 安卓特有的样式 */
				padding-top: 80rpx;
				/* 红色字体 */
				/* #endif */
				/* #ifdef H5  */
				/* 安卓特有的样式 */
				padding-top: 30rpx;
				/* 红色字体 */
				/* #endif */
			}

			.nav2 {
				margin:0 20rpx 30rpx;
				::v-deep  {
					.u-tabs__wrapper__nav__item{
						width: 50%;
						background-color: #f5f5f5;
						padding:0;
						.u-tabs__wrapper__nav__item__text{
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
					
				}
				
			}
			.item-box{
				margin:30rpx 20rpx;
				border:1rpx solid #f5f5f5;
				box-sizing:border-box;
				border-radius: 20rpx 20rpx 0 0;
				overflow: hidden;
				.title{
					font-size:30rpx;
					font-weight: 600;
					box-sizing:border-box;
					padding:0 24rpx;
					height: 88rpx;
					line-height: 88rpx;
					background-color: #f5f5f5;
				}
				.item{
					display: flex;
					align-items:center;
					margin:20rpx 20rpx 28rpx; 
					.headerimg{
						width: 100rpx;
						height: 130rpx;
						margin-right: 30rpx;
						border-radius: 16rpx;
						border:1rpx solid #f5f5f5;
						flex:none;
					}
					.center{
						flex:auto;
						height: 130rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.name{
							font-weight:600;
							color:#333;
						}
						.tel{
							color:#666;
						}
					}
					.right{
						flex:none;
						margin-left:20rpx;
						.dakabtn{
							padding:6rpx 14rpx;
							background-color: #3c9cff;
							border-radius: 6rpx;
							color:#ffffff;
						}
					}
					
				}
				
			}
		}
	}
</style>