<template>
	<view class="main">
		<view class="tabar">
			<u-navbar autoBack class="nav" bgColor="transparent">
				<view class="navSlot" slot="left">
					<u-icon name="arrow-left" size="19"></u-icon>
					<text class="title">每日打卡</text>
				</view>
			</u-navbar>
			<view class="navStatus">
				<view class="clockIn">
					<view class="clock">
						今日打卡
					</view>
					<view class="gocheckIn" @click="gitadd">去打卡</view>
				</view>
			</view>
			<view>
				<calendar @changeMonth="changeMonth" @change="handleSelect" :leaveDateList="list"
					:normalDateList="datlist"></calendar>
			</view>
		</view>
	</view>
</template>

<script>
	import calendar from '@/components/mi-calendar/mi-calendar.vue'
	export default {
		components: {
			calendar
		},
		data() {
			return {
				showComponent: true,
				time: '',
				datlist: [], //打卡日期
				list: [], //未打卡日期
			}
		},
		onLoad() {
			// 获取当前日期对象
			const now = new Date();
			this.time = this.$u.timeFormat(now.getTime(), 'yyyy-mm-dd')
			let data = this.$u.timeFormat(now.getTime(), 'yyyy-mm')
			this.getDatlist("2024-12-02 16:14:18")
			this.getList("2024-12-02 16:14:18")
		},
		methods: {
			toggleComponent() {
				this.showComponent = !this.showComponent; // 切换组件显示状态
			},
			handleSelect(e) {
				console.log(e)
				this.time = e
			},
			//打卡
			gitadd() {
				const params = {
					url: '/system/clock/adduserclock',
					data: {
						userId: uni.getStorageSync("userId"),
						punchTime: this.time,
						clockStatus: '1',
					},
				}
				this.$request(params).then(res => {
					this.$u.toast('打卡成功')
				})
			},
			//获取打卡日期
			getDatlist(time) {
				const params = {
					url: '/system/clock/list',
					data: {
						userId: uni.getStorageSync("userId"),
						seachTime: time,
						clockStatus: '1',
					},
				}
				this.$request(params).then(res => {
					this.datlist.length = 0
					for (var i = 0; i < res.rows.length; i++) {
						this.datlist.push(res.rows[i].punchTime)
					}
				})
			},
			//获取未打卡日期
			getList(time) {
				const params = {
					url: '/system/clock/list',
					data: {
						userId: uni.getStorageSync("userId"),
						seachTime: time,
						clockStatus: '0',
					},
				}
				this.$request(params).then(res => {
					this.list.length = 0
					for (var i = 0; i < res.rows.length; i++) {
						this.list.push(res.rows[i].punchTime)
					}
				})
			},
			//切换月份监听事件
			changeMonth(y, m) {
				let month=`${m}`
				if(month.length==1){
					month=`0${month}`;
				}
				console.log(`${y}-${month}`)
				let yearMonth=`${y}-${month}`
				this.getDatlist(yearMonth)
				this.getList(yearMonth)
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F8F4F4;
	}

	.main {
		background: linear-gradient(178deg, #FFC3C7 0%, #FFF1F1 100%);
	}

	.clockIn {
		text-align: center;
		padding-left: 274rpx;
		padding-right: 274rpx;

	}

	.nav {
		display: block;
		padding: 54rpx;
	}

	.navStatus {

		// padding: 0rpx 90rpx 20rpx 90rpx;‘
		.clock {
			font-size: 28rpx;
			color: #333333;

		}

		.gocheckIn {
			margin-top: 26rpx;
			background: #FB262A;
			line-height: 80rpx;
			color: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}

	}

	.navSlot {
		display: flex;
		align-items: center;
		font-weight: bold;

		font-size: 36rpx;
		color: #333333;
	}
</style>