<template>
	<view>
		<cpn-navbar title="护理日历"></cpn-navbar>

		<view>
			<!-- 选择器 -->
			<view class="selecter">
				<view class="select-year">
					<view class="text">
						{{select.year}}
					</view>
					<view class="arrow">
						<u-icon name="arrow-down" size="20" color="#36596A"></u-icon>
					</view>
				</view>
				<view class="select-month">
					<view class="arrow">
						<u-icon name="arrow-left" size="20" color="#36596A"></u-icon>
					</view>
					<view class="text">
						{{select.month}}月
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" size="20" color="#36596A"></u-icon>
					</view>
				</view>
			</view>

			<!-- 日历表 -->
			<view class="canlendar">
				<view v-for="(row,index) in calendar" :key="index" class="row">
					<view v-for="(date,index1) in row" :key="index1" @click="dateClick(date,index1)" class="item"
						:class="{itemOver:date.type === -1||date.type === 1||date.type === 2,itemActive:date.date === dateIndex&&date.type === 0}">
						{{date.date}}
					</view>
				</view>
			</view>
			<!-- 日期状态提示 -->
			<view class="status">
				<view class="status-item">
					<view class="icon1"></view>
					<view>进行中</view>
				</view>
				<view class="status-item">
					<view class="icon2"></view>
					<view>待护理</view>
				</view>
				<view class="status-item">
					<view class="icon3"></view>
					<view>已完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//时间选择
				select: {
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1
				},
				//当前选择日期
				dateIndex: null,
				calendar: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
			}
		},
		methods: {
			dateClick(date, index1) {
				if (date.type === 0) {
					this.dateIndex = date.date
				}
			},
			getCalendar(year, month) {
				let res = []

				//判断是否闰年
				function isLeap(year) {
					return (year % 100 == 0 ? (year % 400 == 0 ? 29 : 28) : (year % 4 == 0 ? 29 : 28))
				}

				//获取年的每个月天数
				let mDays = new Map()
				mDays.set(1, 31)
				mDays.set(2, isLeap(year))
				mDays.set(3, 31)
				mDays.set(4, 30)
				mDays.set(5, 31)
				mDays.set(6, 30)
				mDays.set(7, 31)
				mDays.set(8, 31)
				mDays.set(9, 30)
				mDays.set(10, 31)
				mDays.set(11, 30)
				mDays.set(12, 31)

				//获取月份的开始星期
				let startDay =
					new Date(`${year}-${month}-1`).getDay() != 0 ? new Date(`${year}-${month}-1`).getDay() : 7

				//let arrayLength = Math.ceil((mDays.get(month) + startDay) / 7)
				let arrayLength = 6

				for (let i = 1; i <= arrayLength; i++) {
					res.push([])
					for (let j = 0; j < 7; j++) {
						let index = (i - 1) * 7 + j
						let date = index - startDay + 2
						if (date < 1) {
							res[i - 1].push({
								date: (mDays.get(month - 1) ? mDays.get(month - 1) : 31) + date,
								type: 1
							})
						} else if (date > mDays.get(month)) {
							res[i - 1].push({
								date: date - mDays.get(month),
								type: 2
							})
						} else {
							let nowDate = `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`
							nowDate == `${this.year}-${this.month}-${date}` ?
								res[i - 1].push({
									date,
									type: 0,
									today: true
								}) :
								res[i - 1].push({
									date,
									type: 0
								})
						}
					}
				}
				res.unshift([{
					date: "一",
					type: -1
				}, {
					date: "二",
					type: -1
				}, {
					date: "三",
					type: -1
				}, {
					date: "四",
					type: -1
				}, {
					date: "五",
					type: -1
				}, {
					date: "六",
					type: -1
				}, {
					date: "日",
					type: -1
				}])
				this.calendar = res
			}
		},
		computed: {

		},
		watch: {
			year: {
				handler(newVal, oldVal) {
					this.getCalendar(this.select.year, this.select.month)
				},
				immediate: false
			},
			month: {
				handler(newVal, oldVal) {
					this.getCalendar(this.select.year, this.select.month)
				},
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	//公共
	/deep/.u-navbar {
		border-radius: 0 0 50rpx 50rpx;
	}

	// 待护理
	.icon1 {
		width: 16rpx;
		height: 16rpx;
		background: #FDB030;
		border-radius: 100%;

		margin-right: 14rpx;
	}

	//已完成
	.icon2 {
		width: 16rpx;
		height: 16rpx;
		background: #1173FF;
		border-radius: 100%;

		margin-right: 14rpx;
	}

	//进行中
	.icon3 {
		width: 12rpx;
		height: 12rpx;
		background: #2EC28B;
		border-radius: 100%;

		margin-right: 14rpx;
		position: relative;

		&::after {
			content: '';
			width: 24rpx;
			height: 24rpx;
			border: 2rpx solid #2EC28B;
			border-radius: 100%;
			animation: icon-scale 3s linear infinite;

			position: absolute;
			top: -8rpx;
			left: -8rpx;
		}

		@keyframes icon-scale {

			0%,
			30%,
			100%,
			40% {
				transform: scale(0.7, 0.7);
			}

			70% {
				transform: scale(1, 1);
			}
		}
	}

	.selecter {
		display: flex;
		justify-content: space-between;

		margin-top: 44rpx;

		.select-year {
			width: 224rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			margin-left: 34rpx;

			.text {
				flex: 1;
				height: 40rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
				text-align: center;
			}

			.arrow {
				width: 70rpx;
				height: 70rpx;
				background: rgba(20, 121, 255, 0.1);
				border-radius: 5rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.select-month {
			width: 224rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			margin-right: 40rpx;

			.arrow {
				width: 70rpx;
				height: 70rpx;
				background: rgba(20, 121, 255, 0.1);
				border-radius: 5rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.text {
				width: 52rpx;
				height: 40rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}
		}
	}

	.canlendar {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		margin: 36rpx auto 0 auto;

		.row {
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.item {
				height: 64rpx;
				width: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 10rpx;

				margin: 20rpx;
			}

			//非本月的日
			.itemOver {
				color: #B7B7B7;
			}

			//选择的日
			.itemActive {
				color: #fff;
				background-color: #0F0F0F;
			}
		}
	}

	.status {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #36596A;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		margin: 36rpx 132rpx 0 132rpx;

		.status-item {
			display: flex;
			align-items: center;


		}
	}
</style>
