<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.signdate ? 'signdate':'',item.value===currentDay?'today':'']"
				@click="changeToday_(item)">
				<!-- <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 {
		props: {
			currentDate: {
				type: Object,
				default: function() {
					return {
						year: '',
						month: ''
					};
				}
			},
			shareDate_: {
				type: String,
				default: ""
			},
			cateringAbnormalTypeGroupList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			changeToday: {
				type: Function,
				default: function() {

				}
			}
		},
		data() {
			return {
				current: {}, // 当前时间
				weekList: ['一', '二', '三', '四', '五', '六', '日'],
				calendarList: [], // 用于遍历显示
				shareDate: new Date(),
				groupList: [],
			}
		},
		computed: {
			// 显示当前时间
			currentDateStr() {
				let {
					year,
					month
				} = this.current;
				return `${year}年${this.pad(month)}月`;
			}
		},
		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() {
				console.log(this.shareDate_, )
				this.shareDate = new Date(this.shareDate_);
				this.current = this.currentDate;
				this.groupList = this.cateringAbnormalTypeGroupList
				// this.shareDate = new Date('2023-05-01')
				console.log(this.shareDate, 'shareDate11111')
				// 初始化当前时间
				// this.setCurrent();
				this.calendarCreator();
			},
			changeToday_(item) {
				this.$emit('changeToday', item)
			},
			// 判断当前月有多少天
			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 t = new Date(this.current.year)
				console.log(d, 'setCurrent')
				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;
				console.log(this.groupList, 'groupList')

				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;
				// 默认每月第一天
				let currentToday = {
					month: this.current.month,
					unrecordedZao: false,
					unrecordedWu: false,
					unrecordedWan: false
				}
				while (begin <= end) {
					this.shareDate.setTime(begin);
					let year = this.shareDate.getFullYear();
					let curMonth = this.shareDate.getMonth();
					let date = this.shareDate.getDate();
					let obj = {
						year: year,
						month: curMonth,
						date: date,
						disable: curMonth !== month,
						value: this.stringify(year, curMonth, date),
						signdate: false
					}
					if (curMonth == month) {
						let f = this.groupList.filter(y => y.date == date)
						if (f.length) {
							obj.signdate = true
							if(f[0].date == 1){
								currentToday = Object.assign(currentToday, f[0])
							}
						}
					}
					list.push(obj);
					begin += oneDayMS;
				}
				console.log(currentToday, 'currentToday')
				this.changeToday_(currentToday)
				this.calendarList = list;
				console.log(list, 'calendarList')
			}
		},
		watch: {
			currentDate(val, oldVal) {
				if (val !== oldVal) {
					this.current = val;
					this.calendarCreator();
				}
			},
			shareDate_(val, oldVal) {
				if (val !== oldVal) {
					this.shareDate = new Date(val)
					this.calendarCreator();
				}
			},
			cateringAbnormalTypeGroupList(val, oldVal) {
				if (val !== oldVal) {
					this.groupList = val
					this.calendarCreator();
				}
			}
		},

	}
</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: 88rpx;
		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>