<template>
	<view class="signin_list" :style="vuex_theme">
		<mi-calendar :suspensionDateList="suspensionDateList" @change="change" @changeMonth="changeMonth"></mi-calendar>

		<view class="steps">
			<u-steps current="1" direction="column" v-if="signList.length> 0">

				<view v-for="(item, i) in signList" :key="i">
					<u-steps-item :title="timeFormat(item.createdTime, 'yyyy-mm-dd hh:MM')" :desc="item.location"
						v-if="i == 0">
						<u-icon slot="icon" size="38rpx" :name="vuex_baseImgUrl && `${vuex_baseImgUrl}currentTime.png`"></u-icon>
					</u-steps-item>
					<u-steps-item :title="timeFormat(item.createdTime, 'yyyy-mm-dd hh:MM')" :desc="item.location"
						v-else>
						<u-icon slot="icon" size="16rpx" :name="vuex_baseImgUrl && `${vuex_baseImgUrl}beforeTime.png`"></u-icon>
					</u-steps-item>
				</view>
			</u-steps>

			<view v-else class="no_data">
				<c-no-data paddingTop="30"></c-no-data>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapActions
	} from 'vuex'
	import listMixin from "@/common/mixins/list-mixin.js";

	import {
		getsignInListApi,
	} from '@/config/api.js';


	export default {
		data() {

			const d = new Date();
			const year = d.getFullYear();
			let month = d.getMonth() + 1;
			month = month < 10 ? `0${month}` : month;
			const date = this.getZero(d.getDate());

			return {
				initList: [],
				nowTime: `${year}-${month}-${date}`,
				suspensionDateList: [],
				signList: [],
			}
		},

		onLoad(option) {
			this.studentId = option.studentId;
			this.planId = option.planId;

			getsignInListApi({
				studentId: option.studentId,
				planId: option.planId,
			}).then(data => {
				this.initList = data;
				if (data && data.length > 0) {

					let suspensionDateList = [];
					data.map((item, index) => {
						let suspensionDate = this.timeFormat(item.signIn)
						console.log(suspensionDate, this.nowTime)
						suspensionDateList.push(suspensionDate);
					})
					this.suspensionDateList = suspensionDateList;

					this.filterData(data, this.nowTime);


				}
			})

		},

		methods: {
			timeFormat(timestamp, format = 'yyyy-mm-dd') {
				return timestamp > 0 ? uni.$u.timeFormat(timestamp, format) : '--'
			},

			filterData(data, time) {
				let signListArr = data.filter(item => this.timeFormat(item.signIn) == time);
				this.signList = signListArr.length > 0 ? signListArr[0].attendanceList : [];
			},

			change(date) {
				console.log(date); // 日期 eg：'2022-01-01'
				this.filterData(this.initList, date);
			},
			
			getZero(num) {
				// 单数前面加0
				if (parseInt(num) < 10) {
					num = '0' + num;
				}
				return num;
			},

			changeMonth(year, month) {
				console.log(year, month); // 日期 eg：2022, 6

				let monthTime = new Date(year, month - 1);
				console.log(monthTime.getTime())

				getsignInListApi({
					studentId: this.studentId,
					time: monthTime.getTime(),
				}).then(data => {
					this.initList = data;
					if (data && data.length > 0) {

						let suspensionDateList = [];
						data.map((item, index) => {
							let suspensionDate = this.timeFormat(item.signIn)
							console.log(suspensionDate, this.nowTime)
							suspensionDateList.push(suspensionDate);
						})
						this.suspensionDateList = suspensionDateList;

						// let monthFormat = month < 10 ? `${year}-0${month}` : `${year}-${month}`;
						// if (this.nowTime.indexOf(monthFormat) != -1) {
						// 	this.filterData(data, this.nowTime);

						// }

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.signin_list {
		width: 100%;
		min-height: 100%;
		height: auto;
		background-color: #F7F7F7;
		padding: 5rpx 0 20rpx 0;

		.steps {
			width: 630rpx;
			min-height: 550rpx;
			padding: 30rpx;
			margin: 20rpx auto 0;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0 3rpx 32rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.steps /deep/ .u-steps-item {
			padding-bottom: 40rpx;

			.u-steps-item__content {
				.u-text {

					.u-text__value {
						font-size: 28rpx !important;
					}

					.u-text__value--content {

						color: #202131 !important;
					}

					.u-text__value--tips {
						color: #909097 !important;
					}
				}
			}
		}

	}
</style>