<template>
	<view class="content">
		<scroll-view :scroll-y="true" class="sign-scroll" scroll-with-animation="true" style="height: 100%; flex: 1; box-sizing: border-box" :scroll-top="scrollTop">
			<view class="header">
				
				<view style="
            font-size: 32rpx;
            color: #111;
            text-align: center;
            padding: 30rpx 0;
          ">
					<text>{{ title }}</text>
				</view>
				<view class="week">
					<view>日</view>
					<view>一</view>
					<view>二</view>
					<view>三</view>
					<view>四</view>
					<view>五</view>
					<view>六</view>
				</view>
			</view>
			<view class="section">
				<view v-for="(res, line) in resDate" class="item" :key="line">
					<view class="year">{{ res.year }}年{{ res.month }}月</view>
					<view class="day">
						<view v-for="week in res.oneDayWeek" class="day-list"
							:style="{ width: (dayWidth - 10) / 7 + 'px' }"></view>
						<view @tap="selectDay(line, index, (line + 1).toString() + index)"
							v-for="(item, index) in res.day" :key="index" class="day-list" :class="[
                line == start[0] && index == start[1]
                  ? 'bg-orange select-style'
                  : '',
                (line >= start[0] &&
                  line <= end[0] &&
                  index > start[1] &&
                  index < end[1]) ||
                (line >= start[0] && index > start[1] && line < end[0]) ||
                (line <= end[0] && index < end[1] && line > start[0]) ||
                (line < end[0] && line > start[0])
                  ? 'bg-higlt-orange'
                  : '',
                (line == 0 && index + 1 < nowDay) ? 'time-out' : '',
                isNaN(item) ? 'is-festival' : '',
                (isNaN(item) && line == start[0] && index == start[1]) ||
                (isNaN(item) && line == end[0] && index == end[1])
                  ? 'not-festival'
                  : '',
                (priceStauts.length > 0 &&
                  priceStauts[line][index] < 0 &&
                  start.length > 0 &&
                  end.length > 0) ||
                (priceStauts.length > 0 &&
                  priceStauts[line][index] < 0 &&
                  start.length == 0 &&
                  end.length == 0)
                  ? 'not-sub'
                  : '',
                priceStauts.length > 0 &&
                end.length == 0 &&
                start.length > 0 &&
                priceStauts[line][index] < 0 &&
                line + index * 2 != lastNot[0] + lastNot[1] * 2
                  ? 'not-sub'
                  : '',
              ]" :style="{
                width: (dayWidth - 10) / 7 + 'px',
                borderRadius:
                  line == end[0] && index == end[1] ? '0px 6px 6px 0px' : '',
                backgroundColor:
                  line == end[0] && index == end[1] ? '#111' : '',
                color: line == end[0] && index == end[1] ? '#FFFFFF' : '',
              }">
							<view style="padding-top: 2px; padding-bottom: 2px">{{
                item
              }}</view>
							<!-- <view class="select-style" v-if="line == start[0] && index == start[1]">最早</view>
							<view class="select-style" v-if="line == end[0] && index == end[1]">最晚</view> -->
							<view style="font-size: 12px; padding-bottom: 3px" v-if="priceStauts.length > 0">
								<view v-if="priceStauts[line][index] > 0" style="color:#FF3166">
									￥{{ priceStauts[line][index] }}</view>
								<view v-if="priceStauts[line][index] == -1">售罄</view>
								<view v-if="priceStauts[line][index] == -2">候补</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="submit" v-if="!immediately">
			<button class="sub-btn" :disabled="!isSub" @click="submit">
				<text v-if="isSub">确定</text>
				<text v-if="!isSub">选择出行时间</text>
			</button>
		</view>
	</view>
</template>

<script>
	//引入节假日的数据，也可以用后台返回去渲染
	import json from "./day.js";

	export default {
		props: {
			priceList: {
				type: Array,
				default: [],
			},
			defaultDate: {
				type: String,
				default: "",
			},
			title: {
				type: String,
				default: "选择日期",
			},
			immediately: {
				type: Boolean,
				default: false,
			},
		},
		computed: {
			//房间是否能预订
			isSub() {
				
				return this.start.length == 2;
			},
			//计算日历里的节假日
			resDate() {
				if (this.date.length == 0) return;

				for (var i = 0; i < this.date.length; i++) {
					for (var j = 0; j < this.festival.length; j++) {
						if (
							this.festival[j].year == this.date[i].year &&
							this.festival[j].month == this.date[i].month
						) {
							for (var k = 0; k < this.festival[j].festival.length; k++) {
								if (
									this.date[i].day.indexOf(this.festival[j].festival[k].day) != -1
								) {
									this.date[i].day[
										this.date[i].day.indexOf(this.festival[j].festival[k].day)
									] = this.festival[j].festival[k].name;
								}
							}
						}
					}
				}

				return this.date;
			},
		},
		data() {
			return {
				out: 0,
				festival: json, //节假日
				type: "-", //日期分隔符
				date: [], //日期数组对象
				dayWidth: 0, //日期的宽度
				nowDay: 0, //当前时间的日
				start: [], //入住时间
				count: 6, //显示月的数量
				startDay: "", //入住日期
				startWeek: "", //入住时间的周几
				end: [], //离开时间
				endDay: "", //离开日期
				endWeek: "", //离开时间的周几
				day: 0, //多少晚
				priceStauts: [], //价格状态
				lastNot: [0, 10], //前置的无房操作
				userDefaultDate: "",
				scrollTop:0,
				scrollHeight:0
			};
		},
		mounted() {
			this.userDefaultDate = this.defaultDate;
			uni.getSystemInfo({
				success: (res) => {
					this.dayWidth = res.windowWidth;
				},
			});

			this.setDate();
			var dateTime = new Date();
			dateTime = dateTime.setDate(dateTime.getDate() + 1);
			this.nowDay = new Date(dateTime).getDate();
			if (this.userDefaultDate != "") {
				this.start = this.setDefaultDate(this.userDefaultDate);
			}
			this.priceStauts = this.initPrice();
			setTimeout(()=>{
				const that =this
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.sign-scroll').boundingClientRect((rects) => {
				  that.scrollHeight = rects[0].height
				  that.calcDefautlOffset()
				}).exec();
			},200)
		},
		watch: {
			
			defaultDate(newVal) {
				this.userDefaultDate = newVal;
				if (this.userDefaultDate != "") {
					this.start = this.setDefaultDate(this.userDefaultDate);
				}
				this.priceStauts = this.initPrice();
			},
			//入住日期
			start(newVal) {
				if (this.start.length > 0) {
					this.startDay =
						this.setMonth(newVal[0]) +
						this.isFestival(newVal[0], newVal[1]) +
						"日";
					this.startWeek = this.getWeek(
						this.date[newVal[0]].year +
						"/" +
						this.date[newVal[0]].month +
						"/" +
						this.isFestival(newVal[0], newVal[1])
					);
				}

				if (this.priceStauts.length > 0) {
					for (var i = newVal[0]; i < this.priceStauts.length; i++) {
						if (i == newVal[0]) {
							for (var j = newVal[1]; j < this.priceStauts[i].length; j++) {
								if (this.priceStauts[i][j] == -1) {
									this.lastNot = [i, j];
									return;
								}
							}
						} else {
							for (var j = 0; j < this.priceStauts[i].length; j++) {
								if (this.priceStauts[i][j] == -1) {
									this.lastNot = [i, j];
									return;
								}
							}
						}
					}
					//清空
					this.lastNot = [];
				}
			},
		},
		methods: {
			calcDefautlOffset(){
				const that =this
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.select-style').boundingClientRect((rects) => {
				  
				  const top = rects[0].top-(that.scrollHeight) - 20
				  that.scrollTop = top>0?top:0
				}).exec();
			},
			initPrice() {
				//年份
				var year = new Date().getFullYear();
				let data = [];
				//月份
				var month = new Date().getMonth();
				for (let i = 0; i < this.count; i++) {
					var days = [];
					var week = 0;
						for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
							let isexsit = false;
							const m = month + 1 > 9 ? month + 1 : "0" + (month + 1);
							const d = j + 1 > 9 ? j + 1 : "0" + (j + 1);
							const ds = `${year}-${m}-${d}`
							const price = this.priceList.find(p => p.startDate == ds)
							if (price) {
								isexsit = true
								if (price.remainNum > 0){
									// #ifdef MP-DI
									days.push(price.b2CPrice)
									// #endif
									// #ifdef MP-AG
									days.push(price.b2BPrice)
									// #endif
								}
								else if (price.isSubstitution == 1)
									days.push(-2)
								else
									days.push(-1)
							} else {
								days.push(0);
							}
						}
					
					data.push(days);
					if (month == 11) {
						year += 1;
						month = 0;
					} else {
						month++;
					}
				}

				return data;
			},
			//月份补零
			setMonth(dateIndex) {
				let month = this.date[dateIndex].month;
				if (month < 10) {
					month = "0" + month;
				}
				return month + "月";
			},
			//如果是节假日名称则返回选择的日期天数
			isFestival(line, index, push = false) {
				var date = this.date[line].day[index];

				if (isNaN(date)) {
					var newIndex = this.date[line].day.indexOf(date) + 1;
					if (push) return newIndex;
					return newIndex < 10 ? "0" + newIndex : newIndex;
				} else {
					if (push) return date;
					return date < 10 ? "0" + date : date;
				}
			},
			//获取今天明天的日期
			getDefaultDate(AddDayCount) {
				var dd = new Date();
				dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
				var year = dd.getFullYear();
				var mon = dd.getMonth() + 1; //获取当前月份的日期
				var day = dd.getDate();
				return year + "-" + mon + "-" + day;
			},
			//设置入住时间 如果没有传值则根据默认值设置
			setDefaultDate(data) {
				var arr = [0, parseInt(this.nowDay - 1)];

				var start = data.indexOf("-") != -1 ? data.split("-") : data.split("/");

				var year = new Date().getFullYear();

				var month = new Date().getMonth() + 1;

				for (var i = 0; i < this.date.length; i++) {
					if (this.date[i].year == start[0] && this.date[i].month == start[1]) {
						if (year == start[0] && month == start[1] && start[2] < this.nowDay) {
							arr = [i, parseInt(this.nowDay - 1)];
						} else {
							arr = [i, parseInt(start[2] - 1)];
						}
						break;
					}
				}
				return arr;
			},
			//清空
			reset() {
				this.start = [];
				this.end = [];
				this.day = 0;
			},
			//补零操作
			setPull(day) {
				if (day < 10) {
					day = "0" + day;
				}
				return day;
			},
			//计算天数
			getDay(date1, date2) {
				//获得天数
				//date1：开始日期，date2结束日期
				var a1 = Date.parse(new Date(date1));
				var a2 = Date.parse(new Date(date2));
				var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心：时间戳相减，然后除以天数
				return day;
			},
			//计算周几
			getWeek(date) {
				var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				var myDate = new Date(Date.parse(date));
				return weekDay[myDate.getDay()];
			},

			//选择入住离开
			selectDay(line, index) {
				if (this.priceStauts[line][index] == 0) {
					uni.showToast({
						title: "抱歉，此日期没有行程哦",
						icon: "none",
					});
				} else if (this.priceStauts[line][index] == -1) {
					uni.showToast({
						title: "改团期已售罄",
						icon: "none",
					});
				} else {
					this.start = [line, index];
				}

				if (this.immediately) {
					this.submit();
				}

				return;
				if (line == 0 && index + 1 < this.nowDay) return;
				//如果有入住情况和价格则需要进行一些列的判断
				if (this.priceStauts.length > 0) {
					if (
						(this.start.length == 0 && this.priceStauts[line][index] < 0) ||
						(this.end.length > 0 && this.priceStauts[line][index] < 0)
					) {
						return uni.showToast({
							title: "该日期已被预订",
							icon: "none",
						});
					}

					if (
						(this.start.length > 0 && line < this.start[0]) ||
						(line == this.start[0] && this.start[1] > index)
					) {
						if (this.priceStauts[line][index] < 0)
							return uni.showToast({
								title: "该日期已被预订",
								icon: "none",
							});
						this.start = [line, index];
						this.end = [];

						return;
					}

					if (this.start.length > 0 && this.end.length == 0) {
						if (this.start[0] - line == 0) {
							for (var j = this.start[1]; j < index; j++) {
								if (this.priceStauts[line][j] < 0)
									return uni.showToast({
										title: "很抱歉，所选入离店时间包含无房日期",
										icon: "none",
										mask: true,
									});
							}
						} else {
							//如果不在同一个月份有三种情况需要处理
							for (var i = this.start[0]; i <= line; i++) {
								//开始日期到开始日期当月的最大日期是否包含无房情况
								if (i == this.start[0]) {
									for (
										var j = this.start[1]; j < this.priceStauts[i].length; j++
									) {
										if (this.priceStauts[i][j] < 0)
											return uni.showToast({
												title: "很抱歉，所选入离店时间包含无房日期",
												icon: "none",
												mask: true,
											});
									}
								} else if (i == line) {
									//结束日期到当月结束日期之前是否包含无房情况
									for (var j = 0; j < index; j++) {
										if (this.priceStauts[i][j] < 0)
											return uni.showToast({
												title: "很抱歉，所选入离店时间包含无房日期",
												icon: "none",
												mask: true,
											});
									}
								} else {
									//中间间隔的月份需要检查每一天是否包含无房情况
									for (var j = 0; j < this.priceStauts[i].length; j++) {
										if (this.priceStauts[i][j] < 0)
											return uni.showToast({
												title: "很抱歉，所选入离店时间包含无房日期",
												icon: "none",
												mask: true,
											});
									}
								}
							}
						}
					}
				}

				//如果没有入住时间
				if (this.start.length == 0) {
					//填充入住时间
					this.start = [line, index];
				} else if (
					this.start.length > 0 &&
					this.start[0] == line &&
					this.start[1] == index &&
					this.end.length == 0
				) {
					return;
				} else {
					//如果没有离开时间
					if (this.end.length == 0) {
						//如果有价格和入住离开情况则需要进行判断所选的离店时间时候包含无房日期

						if (
							line < this.start[0] ||
							(line == this.start[0] && index < this.start[1])
						) {
							this.end = this.start;
							this.start = [line, index];
						} else {
							//如果离开时间比入住时间晚则填充
							this.end = [line, index];
						}
					} else {
						//如果有离开时间则清空离开时间重新填充入住时间
						this.start = [line, index];
						this.end = [];
					}
				}
			},
			//设置日历
			setDate() {
				//年份
				var year = new Date().getFullYear();

				//月份
				var month = new Date().getMonth();
				for (let i = 0; i < this.count; i++) {
					var day = [];
					var week = 0;
					for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
						day.push(j + 1);
					}

					this.date.push({
						year: year,
						month: month + 1,
						day: day,
						oneDayWeek: new Date(
							Date.parse(year + "/" + (month + 1) + "/" + "01")
						).getDay(),
					});
					if (month == 11) {
						year += 1;
						month = 0;
					} else {
						month++;
					}
				}

				return this.date;
			},
			//关闭
			close() {
				uni.navigateBack({
					delta: 1,
				});
			},
			//确定入住离店事件提交
			submit() {
				let m = this.date[this.start[0]].month;
				m = m > 9 ? m : "0" + m;
				let d = this.isFestival(this.start[0], this.start[1], true);
				d = d > 9 ? d : "0" + d;
				var obj = {
					/* startYMD: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival(
							this.start[0], this.start[1]),
						startMD: this.date[this.start[0]].month + this.type + this.isFestival(this.start[0], this.start[1]),
						startDay: this.startDay,
						startWeek: this.startWeek,
						endYMD: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this.isFestival(this
							.end[0], this.end[1]),
						emdMD: this.date[this.end[0]].month + this.type + this.type + this.isFestival(this.end[0], this.end[1]),
						endDay: this.endDay,
						endWeek: this.endWeek,
						day: this.day */
					startWeek: this.startWeek,
					start: this.date[this.start[0]].year + this.type + m + this.type + d,
					startDay: m + "-" + d,
				};
				let tempPrice = {};
				this.priceList.forEach((x, i) => {
					if (obj.start == x.startDate) {
						obj.priceObj = i;
					}
				});

				this.$emit("finish", obj);
			},
		},
	};
</script>

<style>
	/**确认按钮**/
	.submit {
		width: 100%;

		background: white;
		position: fixed;
		bottom: 0upx;

		height: auto;
	}

	.sub-btn {
		height: auto;
		border-radius: 10upx;
		background: #111;
		color: white;
	}

	.content {
		height: 100%;
		z-index: 999;
	}

	/**不能预订**/

	/* 入住离开时间的color */
	.bg-orange {
		background: #111111 !important;
		border-radius: 6px !important;
	}

	.bg-higlt-orange {
		background-color: #fff;
	}

	/* 节假日的日期样式 */
	.is-festival {
		font-size: 22rpx !important;
		color: #000 !important;
	}

	/** 非节假日的日期样式**/
	.not-festival {
		font-size: 18upx;
		color: white;
	}

	/***入住离开时间的日历样式*/

	.not-sub {
		color: #222222;
		background: #dddddd;
	}

	.select-out-item {
		background: #ffffff;
	}

	.select-style {
		color: white !important;
		font-size: 20rpx !important;
		/* font-size: 20upx; */
		/* padding-top: 4upx; */
	}

	.time-out {
		/* text-decoration: line-through; */
		color: #ccc !important;
	}

	/**
	 * 点击日期的样式
	 */
	.bg {
		background: orange;
	}

	/**
	 * 日期部分
	 */
	.section {
		width: 100%;
		padding-bottom: 150upx;
		height: auto;
		padding-top: 176rpx;
		background-color: #f1f4f6;
	}

	.section>.item>.year {
		text-align: center;
		height: 50rpx;
		font-weight: bold;
		/* padding-left:30upx;
		padding-right: 30upx; */
		font-size: 24rpx;
		line-height: 50rpx;
		color: #1b1d1e;
	}

	.section>.item>.day {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		margin-left: 5px;
		margin-right: 5px;
	}

	.section>.item>.day>.day-list {
		margin-top: 30upx;
		margin-bottom: 30upx;
		min-height: 100upx;
		max-height: 180upx;
		display: flex;
		font-size: 26rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #1b1d1e;
	}

	/**
	 * 头部固定
	 */
	.header {
		position: fixed;
		top: 0;
		width: 100%;
		/* height: 400upx; */
		background: white;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.06);
	}

	.bar {
		width: 100%;
		height: var(--status-bar-height);
		background: #222222;
	}

	/**
	 * 关闭清空
	 */
	.set {
		height: 100upx;
		padding-left: 30upx;
		padding-right: 30upx;

		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	/**
	 * 入住离开时间
	 */
	.in-and-out {
		height: 210upx;
		padding-left: 30upx;
		padding-right: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/**
	 * 入住离开的view
	 */
	.in-and-out>.item {
		display: flex;
		flex-direction: column;
		height: 100upx;
	}

	/**
	 * 未选择入离时间时的文字样式
	 */
	.in-and-out>.text {
		margin-top: 100upx;
		font-weight: bold;
		font-size: 36upx;
		color: #c0c0c0;
	}

	/**
	 * 一共选择了多少晚的样式
	 */
	.in-and-out>.item>.count-border {
		width: 200upx;
		font-size: 28upx;
		height: 40upx;
		margin-top: 48upx;
		text-align: center;
	}

	.gray {
		color: #c0c0c0;
		border-bottom: 1px solid #c0c0c0;
	}

	.orange {
		color: orange;
		border-bottom: 1px solid orange;
	}

	/**
	 * 共多少晚
	 */
	.in-and-out>.item>.count-border>.count {
		font-size: 10px;
	}

	/**
	 * 周一到周日
	 */
	.week {
		/* height: 70upx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 25px;
		padding-right: 25px;
		font-size: 24rpx;
		color: #1b1d1e;
		background: white;
		margin-bottom: 16rpx;
	}

	.isa {
		color: red;
	}

	.isa2 {
		color: red;
	}
</style>