<template>
	<view style="width: 100%">
		<view class="paiban">
			<view class="top">
				{{currentTime }}
			</view>
			<view class="nav1">
				<u-tabs :list="nextWeekDates" @click="click" 
				:current="current1"
				:activeStyle="{
				    color: '#3c9cff',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" lineHeight="0" ></u-tabs>
			</view>
			<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="item-box">
				<view class="title">护理人员排班</view>
				<view class="">
					<view v-for="(item,index) in hulilist" :key="index" class="item">
						<image src="../../static/images/profile.jpg" mode="aspectFill" class="headerimg"></image>
						<view class="center">
							<view class="name">
								{{item.name}}
							</view>
							<view class="tel">
								{{item.tel}}
							</view>
						</view>
						<view class="right" v-if="item.isSelf">
							<view class="dakabtn">
								上班打卡
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="title">医生排班</view>
				<view class="">
					<view v-for="(item,index) in hulilist" :key="index" class="item">
						<image src="../../static/images/profile.jpg" mode="aspectFill" class="headerimg"></image>
						<view class="center">
							<view class="name">
								{{item.name}}
							</view>
							<view class="tel">
								{{item.tel}}
							</view>
						</view>
						<view class="right" v-if="item.isSelf">
							<view class="dakabtn">
								上班打卡
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="title">健康管理师排班</view>
				<view class="">
					<view v-for="(item,index) in hulilist" :key="index" class="item">
						<image src="../../static/images/profile.jpg" mode="aspectFill" class="headerimg"></image>
						<view class="center">
							<view class="name">
								{{item.name}}
							</view>
							<view class="tel">
								{{item.tel}}
							</view>
						</view>
						<view class="right" v-if="item.isSelf">
							<view class="dakabtn">
								上班打卡
							</view>
						</view>
					</view>
				</view>
			</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 hulilist = reactive([
		{name:'张三',tel:'15111111111',isSelf:true},
		{name:'张晚',tel:'18222221111',isSelf:false},
		{name:'李晚',tel:'19666621111',isSelf:false},
	])
	const nextWeekDates = ref([]);
	onMounted(() => {
		updateTime(); // 初始更新时间
		generateDates()
		setInterval(updateTime, 60000); // 每分钟更新一次时间
	});

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

	onHide(() => {})

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

	// 计算属性
	let status = computed(() => {
		if (DataList.value.length < total.value) {
			return "more";
		} else {
			finished.value = true;
			return "nomore";
		}
	});

	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);
			currentDate.setDate(currentDate.getDate() + 1);
			dates.push({
				name: 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
	}
</script>
<style lang="scss" scoped>
	page {
		background: #ffffff;
		font-size: 28rpx;
		color: #3d3d3d;
		min-height: 100vh;
		.paiban {
			.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;
				::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>