<template>
	<view style="width: 100%">
		<view class="paiban">
			<view class="top">
			</view>
			<view class="item-box" v-for="(ii,kk) in list" :key="index" >
				<view class="title">{{ii.date}}</view>
				<view class="">
					<view v-for="(item,index) in ii.list" :key="index" class="item">
						<view class="name">
							交班员：<text class="desc">{{item.name}}</text>
						</view>
						<view class="name">
							备注：<text class="desc">{{item.beizhu}}</text>
						</view>
						<view class="name">
							提交时间：<text class="desc">{{item.jieshoudate}}</text>
						</view>
						<view class="name">
							接收时间：<text class="desc">{{item.jieshoudate}}</text>
						</view>
						<view class="name">
							接班员：<text class="desc">{{item.jiebanyuan}}</text>
						</view>
						<view class="name">
							交班开始时间：<text class="desc">{{item.starttime}}</text>
						</view>
						<view class="name">
							交班结束时间：<text class="desc">{{item.endtime}}</text>
						</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 list = reactive([
		{date:'2024/9/6',list:[
			{name:'张三',jiebanyuan:'王峰',beizhu:'无',starttime:'2024/9/6 18:30',endtime:'2024/9/6 19:30',jieshoudate:'2024/9/6 19:30'
			},
			{name:'张三',jiebanyuan:'王峰',beizhu:'无',starttime:'2024/9/6 18:30',endtime:'2024/9/6 19:30',jieshoudate:'2024/9/6 19:30'
			},
			{name:'张三',jiebanyuan:'王峰',beizhu:'无',starttime:'2024/9/6 18:30',endtime:'2024/9/6 19:30',jieshoudate:'2024/9/6 19:30'
			}
		]},
		{date:'2024/9/5',list:[
			{name:'张三',jiebanyuan:'王峰',beizhu:'无',starttime:'2024/9/6 18:30',endtime:'2024/9/6 19:30',jieshoudate:'2024/9/6 19:30'
			},
			{name:'张三',jiebanyuan:'王峰',beizhu:'无',starttime:'2024/9/6 18:30',endtime:'2024/9/6 19:30',jieshoudate:'2024/9/6 19:30'
			},
			{name:'张三',jiebanyuan:'王峰',beizhu:'无',starttime:'2024/9/6 18:30',endtime:'2024/9/6 19:30',jieshoudate:'2024/9/6 19:30'
			}
		]},
	])
	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);
			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
	}
</script>
<style lang="scss" scoped>
	page {
		background: #ffffff;
		font-size: 28rpx;
		color: #3d3d3d;
		min-height: 100vh;
		.paiban {
			padding-top:10rpx;
			.top {
				text-align: right;
				margin: 0 30rpx 10rpx;
			}

			.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{
					margin:20rpx 20rpx 28rpx; 
					line-height:48rpx;
					.name{
						font-weight:600;
						color:#444;
					}
					.desc{
						font-weight:500;
						color:#666;
					}
					
				}
				
			}
		}
	}
</style>