<template>
	<view class="center">
		<view class="topbar">
			<u-navbar :autoBack="true" title="打卡记录" placeholder="true" bgColor="transparent" leftIconColor="#FFF"
				:title-style="{color: '#FFF'}">
			</u-navbar>
			<view class="h-200"></view>
		</view>
		<view class="mlr-25" style="margin-top: -100rpx;">
			<attend-calendar :lateddates="lateddates" :truancyeddates="truancyeddates"
				@on-click="onclick"></attend-calendar>
		</view>
		<view class="flex-column mlr-25 mt-30" style="background: #EBF5F0;">
			<view class="flex v-center pad-30">
				<text class="fs-28 fw-700">打卡天数：</text>
				<text class="fs-24">{{data.clockDay}}天</text>
			</view>
			<view class="flex v-center pad-30">
				<text class="fs-28 fw-700">缺卡天数：</text>
				<text class="fs-24">{{data.noRecordDay}}天</text>
			</view>
		</view>
		<view class="overflow-y">
			<scroll-view scroll-y style="height: 100%;">
				<view @click="onClickSelecte(index)" v-for="(item, index) in todayList" :key="index">
					<view class="flex v-center pad-30 mlr-25 mt-30" style="background: #EBF5F0;">
						<text class="fs-28 fw-700">打卡时间：</text>
						<text class="fs-24">{{item.clockTime}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				sex: '',
				lateddates: [],
				truancyeddates: [],
				data: '',
				todayList: []

			};
		},
		onLoad(options) {
			this.getList();
			const time = this.$wskj.timeFormat(new Date().getTime(), "yyyy-mm-dd").replace(/(^|\D)0+/g, '\$1')
			this.getTodayList(time)
		},
		methods: {
			onclick(date) {
				this.getTodayList(date)
			},
			getList() {
				const params = {
					url: '/api/clock/listAll',
					method: 'GET',
				}
				this.$request(params).then(res => {
					this.data = res.data
					res.data.clockRecordList.forEach(item => {
						if (item.clockState == 1) {
							this.lateddates.push(item.date.replace(/(^|\D)0+/g, '\$1'))
						}
					})
					console.log(this.lateddates)
				})
			},
			getTodayList(date) {
				const params = {
					url: '/api/clock/record/' + date,
					method: 'GET',
				}
				this.$request(params).then(res => {
					this.todayList = res.data

				})
			}
		}
	};
</script>

<style>
	.center {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
	}

	.topbar {
		/* 推荐方式：使用静态资源路径 */
		background-image: url('/pagesMine/static/icon_dkbg.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
</style>