<template>
	<div class="calendar-wrapper">
		<div class="calendar-week">
			<div class="week-item" v-for="item of weekList" :key="item">{{ item }}</div>
		</div>
		<div class="calendar-inner">
			<div class="calendar-item" v-for="(item, index) of calendarList" :key="index"
				:class="[item.disable ? 'disabled' : '',item.value=='2023-08-23'||item.value=='2023-08-18'||item.value=='2023-08-28'?'signdate':'',item.value===currentDay?'today':'']">
				<div v-if="item.value=='2023-08-23'||item.value=='2023-08-18'||item.value=='2023-08-28'" class="icons">
					<span v-if="item.value=='2023-08-23'">早中</span>
					<span v-else-if="item.value=='2023-08-18'">早中晚</span>
					<span v-else>晚</span>
				</div>
				<div class="show">{{ item.date }}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				current: {}, // 当前时间
				weekList: ['一', '二', '三', '四', '五', '六', '日'],
				calendarList: [], // 用于遍历显示
				shareDate: new Date() 
			}
		},
		computed: {
			// 显示当前时间
			currentDateStr() {
				let {
					year,
					month
				} = this.current;
				return `${year}年${this.pad(month + 1)}月`;
			}
		},
		mounted() {
			this.init();
		},
		computed: {
			currentDay(){
				let month=(this.current.month+1)<10?'0'+(this.current.month+1):(this.current.month+1);
				return this.current.year+'-'+month+'-'+this.current.date;
			}
		},
		methods: {
			init() {
				// 初始化当前时间
				this.setCurrent();
				this.calendarCreator();
			},
			// 判断当前月有多少天
			getDaysByMonth(year, month) {
				return new Date(year, month + 1, 0).getDate();
			},
			getFirstDayByMonths(year, month) {
				return new Date(year, month, 1).getDay();
			},
			getLastDayByMonth(year, month) {
				return new Date(year, month + 1, 0).getDay();
			},
			// 对小于 10 的数字，前面补 0
			pad(str) {
				return str < 10 ? `0${str}` : str;
			},
			// 点击上一月
			prevMonth() {
				this.current.month--;
				// 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
				this.correctCurrent();
				// 生成新日期
				this.calendarCreator();
			},
			// 点击下一月
			nextMonth() {
				this.current.month++;
				this.correctCurrent();
				this.calendarCreator();
			},
			// 格式化时间，与主逻辑无关
			stringify(year, month, date) {
				let str = [year, this.pad(month + 1), this.pad(date)].join('-');
				return str;
			},
			// 设置或初始化 current
			setCurrent(d = new Date()) {
				let year = d.getFullYear();
				let month = d.getMonth();
				let date = d.getDate();
				this.current = {
					year,
					month,
					date
				}
			},
			// 修正 current
			correctCurrent() {
				let {
					year,
					month,
					date
				} = this.current;

				let maxDate = this.getDaysByMonth(year, month);
				// 预防其他月跳转到2月，2月最多只有29天，没有30-31
				date = Math.min(maxDate, date);

				let instance = new Date(year, month, date);
				this.setCurrent(instance);
				
			},
			// 生成日期
			calendarCreator() {
				// 一天有多少毫秒
				const oneDayMS = 24 * 60 * 60 * 1000;

				let list = [];
				let {
					year,
					month
				} = this.current;

				// 当前月份第一天是星期几, 0-6
				let firstDay = this.getFirstDayByMonths(year, month);
				// 填充多少天                         
				let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
				// 毫秒数
				let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;

				// 当前月份最后一天是星期几, 0-6
				let lastDay = this.getLastDayByMonth(year, month);
				// 填充多少天， 和星期的排放顺序有关
				let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
				// 毫秒数
				let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;

				while (begin <= end) {
					this.shareDate.setTime(begin);
					let year = this.shareDate.getFullYear();
					let curMonth = this.shareDate.getMonth();
					let date = this.shareDate.getDate();
					list.push({
						year: year,
						month: curMonth,
						date: date,
						disable: curMonth !== month,
						value: this.stringify(year, curMonth, date)
					});
					begin += oneDayMS;	
				}

				this.calendarList = list;
				console.log(list, 'calendarList')
			}
		},

	}
</script>

<style>
	.calendar-wrapper {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.calendar-week {
		display: flex;
		align-items: center;
		text-align: center;
		width: 690rpx;
		height: 74rpx;
		background: #F7FAF8;
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(0,0,0,0.85);
		line-height: 37rpx
	}

	.calendar-week .week-item {
		flex: 1;
	}
	
   .calendar-week .week-item:first-child,.week-item:last-child {
	   color: rgba(0,0,0,0.25);
   }

	.calendar-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.calendar-item {
		display: flex;
		width: 88rpx;
		height: 88rpx;
		box-sizing: border-box;
		padding-top: 28rpx;
		border-radius: 22rpx;
		margin: 5rpx;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.75);
		line-height: 45rpx;
		flex-direction: column;
	}

	.calendar-item.disabled {
		color: rgba(0, 0, 0, 0.1);
	}

	.signdate {
		border-radius: 22rpx;
		background-color: rgba(249, 121, 63, 0.1);
		color: #F9793F;
		line-height: 28rpx;
		height: 87rpx;
		padding-top: 0rpx;
	}

	.icons {
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F9793F;
		line-height: 28rpx;
		margin-bottom: 4rpx;
	}
	
	.today {
		background: rgba(0, 0, 0, 0.1);
	}

	.calendar-item.checked {
		color: red;
	}
</style>