<template>
	<view class="select_time_range">
		<view class="sche_calendar">
			<view class="sche_month">
				<view class="iconfont icon-arrows_left" @click="prev"></view>
				<view>{{time}}</view>
				<view class="iconfont icon-arrows_right" @click="next"></view>
			</view>
			<view class="calendar">
				<view class='header'>
					<view v-for="(item,index) in date" :key="item" :class='[(index == todayIndex) && isTodayWeek ? "weekMark" : ""]'>{{item}}
					</view>
				</view>
				<!-- 每一天你的日期 -->
				<view class='date-box'>
					<view v-for="(item,index) in dateArr" :key="item.isToday" :class='[isToday == item.isToday ? "nowDay" : "",todayData == item.isToday ? "nowdate" : ""]'
					 @click="everyDay(item.isToday,item.dateNum)">
						<view></view>
						<view class='date-head' :class="[item.dateNum>=start && item.dateNum <= end?'red':'']">
							<view class="date-style">{{item.dateNum}}</view>
							<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==start?'起':''}}</view>
							<view v-if="item.dateNum >=start && item.dateNum <= end > 0">{{item.dateNum ==end?'止':''}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 
	export default {
		data() {
			return {
				date: ['日', '一', '二', '三', '四', '五', '六'],
				todayIndex: 0, //表示星期几
				dateArr: [], //储存每个月日期的数组
				todayData: 0, //今天是几号
				year: 0, //年
				month: 0, //月
				day: 0, //日
				isToday: 0, //今天是几号
				isTodayWeek: false, //
				start: 0, //开始
				end: 0, //结束
				dataquan: true, //是否自定义选择区间
				time: '' //当前月份
			}
		},
		onLoad() {

		},
		created() {
			this.getDataInfo()
		},
		mounted() {

		},
		methods: {
			getDataInfo() {
				let now = new Date();
				let year = now.getFullYear();
				let month = (now.getMonth() + 1 + '').padStart(2, 0);
				let day = (now.getDate() + '').padStart(2, 0);
				this.dateInit();
				this.year = year;
				this.month = month;
				this.day = now.getDate()
				this.isToday = '' + year + "/" + month + "/" + day
				this.todayData = '' + year + "/" + month + "/" + day
				this.time = `${year}年${month}月`
			},
			// 点击切换日期
			everyDay(date, dateNum) {
				// start 和 end 全不是0
				if (this.dataquan === true) {
					if (this.start != 0 && this.end != 0) {
						this.start = 0 //暂时定义为开始时间
						this.end = 0
					}
					// start 和 end 全部是0
					if (this.start == 0 && this.end == 0) {
						this.start = dateNum //暂时定义为开始时间
					} else if (dateNum < this.start) {
						this.end = this.start
						this.start = dateNum
					} else if (dateNum > this.start) {
						this.end = dateNum
					}
				}
				this.isToday = date
			},
			// 初始化当前日期格式  yyyy-mm-dd
			dateInit: function(setYear, setMonth) {
				let dateArr = []; //需要遍历的日历数组数据
				let arrLen = 0; //dateArr的数组长度
				let now = setYear ? new Date(setYear, setMonth) : new Date();
				let year = setYear || now.getFullYear();
				let nextYear = 0;
				let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数
				let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
				let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay(); //目标月1号对应的星期
				let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天
				let obj = {};
				let num = 0;
				//  
				if (month + 1 > 11) {
					nextYear = year + 1;
					dayNums = new Date(nextYear, nextMonth, 0).getDate();
				}
				arrLen = startWeek + dayNums;
				for (let i = 0; i < arrLen; i++) {
					if (i >= startWeek) {
						num = i - startWeek + 1;
						obj = {
							isToday: '' + year + "/" + ((month + 1) + '').padStart(2, 0) + "/" + (num + '').padStart(2, 0),
							nowdate: '' + year + "/" + ((month + 1) + '').padStart(2, 0) + "/" + (num + '').padStart(2, 0),
							dateNum: num,
						}
					} else {
						obj = {};
					}
					dateArr[i] = obj;
				}
				this.dateArr = dateArr
				let nowDate = new Date();
				let nowYear = nowDate.getFullYear();
				let nowMonth = nowDate.getMonth() + 1;
				let nowWeek = nowDate.getDay();
				let getYear = setYear || nowYear;
				let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
				if (nowYear == getYear && nowMonth == getMonth) {
					this.isTodayWeek = true,
						this.todayIndex = nowWeek
				} else {
					this.isTodayWeek = false,
						this.todayIndex = -1
				}
			},
			prev() {
				this.year = parseInt(this.month) - 1 == 0 ? this.year - 1 : this.year
				this.month = parseInt(this.month) - 1 == 0 ? 12 : parseInt(this.month) - 1;
				let setYear = this.year;
				let setMonth = this.month - 1
				this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
				this.dateInit(setYear, setMonth);
			},
			next() {
				this.year = parseInt(this.month) + 1 > 12 ? this.year + 1 : this.year
				this.month = parseInt(this.month) + 1 > 12 ? 1 : parseInt(this.month) + 1;
				let setYear = this.year;
				let setMonth = this.month - 1
				this.time = `${setYear}年${(this.month+'').padStart(2,0)}月`
				this.dateInit(setYear, setMonth);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sche_calendar {
		background-color: #fff;
		margin-bottom: 20rpx;
	
		.sche_month {
			display: flex;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			font-size: 32rpx;
			justify-content: space-between;
			padding: 0 50rpx;
	
			.icon-arrows_left,
			.icon-arrows_right {
				font-size: 50rpx;
			}
		}
	
		.calendar {
			padding: 0 20rpx;
			font-size: 24rpx;
			color: #999;
			background-color: #fff;
	
			.header {
				view {
					display: inline-block;
					width: 14.285%;
					text-align: center;
					padding: 20rpx 0;
				}
	
				.weekMark {
					position: relative;
	
					view {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						border-bottom: 1px solid #22A7F6;
					}
				}
			}
	
			.date-box>view {
				position: relative;
				display: inline-block;
				width: 14.285%;
				color: #020202;
				text-align: center;
				vertical-align: middle;
				margin: 10rpx 0;
	
			}
	
		}
	}
	
	.red {
		background: #52c1f5 !important;
		border-radius: 0 !important;
		width: auto !important;
		color: #fff !important;
	}
	
	
	
	.date-box {
		font-size: 0;
		padding: 10rpx 0;
		background-color: #fff;
	}
	
	.btn_fix {
		position: fixed;
		bottom: 100rpx;
		right: 80rpx;
	
		image {
			width: 80rpx;
			height: 80rpx;
	
			background-color: #fff;
			border-radius: 40rpx;
		}
	}
	
	.date-head {
		height: 60rpx;
		/* line-height: 60rpx; */
		font-size: 26rpx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		color: #999;
		.date-style {
			line-height: 50rpx;
		}
	}
	
	.nowDay .date-head {
		width: 60rpx;
		border-radius: 50%;
		text-align: center;
		color: #fff !important;
		background-color: #52c1f5;
		font-weight: normal !important;
	}
	
	.nowdate .date-head {
		color: #52c1f5;
		font-weight: bold;
	}
	
	.van-hairline--top-bottom {
		position: fixed;
	}
</style>
