<template>
	<view class="contentBox">
		<scroll-view :scroll-y="true" style="height: 100%; flex: 1; box-sizing: border-box">
			<view class="header">
				<view class="tabsBox" style="margin-bottom: 20rpx;">
					<view v-for="(item,index) in d" class="fontw100" :class="[active==item.Id?'active':'']" :style="{'color':active==item.Id?mainColor:''}"
					 @click="changeHandler(item.Id)">
						<view>{{item.Name}}</view>
						<template v-if="item.minprices">
							<text class="fontw100" :style="{'color':mainColor}">￥{{item.minprices}}
								<text>起</text>
							</text>
						</template>
						<template v-else>
							<text class="fontw100" :style="{'color':mainColor}">
								<text>暂无团期</text>
							</text>
						</template>
						<view class="tabsLine" :style="{'background':active==item.Id?mainColor:''}"></view>
					</view>
				</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">
					<template v-if="activeMonth.Month==res.month">
						<!-- <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' : '',
                background:  line == start[0] && index == start[1]?mainColor:''
              }">
								<view style="padding-top: 2px; padding-bottom: 2px">{{
                item
              }}</view>
								<view style="font-size: 12px; padding-bottom: 3px" v-if="priceStauts.length > 0">
									<view v-if="priceStauts[line][index] > 0">￥{{ priceStauts[line][index] }}</view>
									<view v-if="priceStauts[line][index] < 0">售罄</view>
								</view>
							</view>
						</view>
					</template>
				</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 {
				d: [],
				mainColor: "",
				active: 0,
				activeMonth: null,
				out: 0,
				festival: json, //节假日
				type: "-", //日期分隔符
				date: [], //日期数组对象
				dayWidth: 0, //日期的宽度
				nowDay: 0, //当前时间的日
				start: [], //入住时间
				count: 6, //显示月的数量
				startDay: "", //入住日期
				startWeek: "", //入住时间的周几
				end: [], //离开时间

				day: 0, //多少晚
				priceStauts: [], //价格状态
				lastNot: [0, 10], //前置的无房操作
				userDefaultDate: "",
			};
		},
		mounted() {
			this.userDefaultDate = this.defaultDate;
			uni.getSystemInfo({
				success: (res) => {
					this.dayWidth = res.windowWidth - 20;
				},
			});
			this.setDate();
			const Dates = new Date()
			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();
			this.mainColor = this.$uiConfig.mainColor;
			let ThisYearMonth = ''
			for (let i = 0; i < 4; i++) {
				let Year = Dates.getFullYear()
				let Month = Dates.getMonth() + (i + 1)
				if (ThisYearMonth && ThisYearMonth == 12) {
					Year = Dates.getFullYear() + 1
				}
				if (Month == 12) ThisYearMonth = Month
				let obj = {
					Id: i,
					Year,
					Month,
					Name: Month + '月',
					prices: [],
					minprices: 0,
				}
				this.d.push(obj)
			}
			this.getMinPrice()
			this.activeMonth = this.d[0]
			// #ifdef MP-ALIPAY
			uni.setNavigationBarTitle({
				title: "",
			});
			// #endif
		},

		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 = [];
				}
			},
			priceList(newVal) {
				this.priceStauts = this.initPrice();
				this.getMinPrice()
			}
		},
		methods: {
			getMinPrice() {
				this.d.forEach(x => {
					x.prices = []
				})
				for (let i = 0; i < this.priceList.length; i++) {
					let datas = this.priceList[i].attr_name.split('-')
					for (let j = 0; j < this.d.length; j++) {
						let m = this.d[j].Month > 9 ? this.d[j].Month : '0' + this.d[j].Month
						if (datas[1] == m) {
							this.d[j].prices.push(this.priceList[i].newPrice)
						}
					}
				}
				this.d.forEach(x => {
					x.minprices = Math.min.apply(null, x.prices)
				})
			},
			changeHandler(i) {
				this.active = i;
				this.$emit('getMonth')
				this.activeMonth = this.d.find(x => {
					return x.Id == i
				})
			},
			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;
						this.priceList.forEach((x) => {
							let m = month + 1 > 9 ? month + 1 : "0" + (month + 1);
							let d = j + 1 > 9 ? j + 1 : "0" + (j + 1);
							if (x.attr_name == `${year}-${m}-${d}`) {
								isexsit = true;
								if (x.newStock > 0) {
									days.push(x.newPrice);
								} else {
									days.push(-1);
								}
							}
						});
						if (!isexsit) {
							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;
			},
			//计算天数
			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.priceStauts[line][index] && this.immediately) {
					this.submit();
				}
			},
			//设置日历
			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;
			},
			//确定入住离店事件提交
			submit() {
				let m = this.activeMonth.Month > 9 ? this.activeMonth.Month : '0' + this.activeMonth.Month; //this.date[0].month>9?this.date[0].month:'0'+this.date[0].month;
				let d = this.isFestival(this.start[0], this.start[1], true);
				d = d > 9 ? d : "0" + d;
				var obj = {
					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>
	.fontw100 {
		font-weight: 100;
	}

	.tabsBox {
		display: flex;
	}

	.tabsBox view {
		width: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		margin-right: 60rpx;
		width: 100%;
		text-align: center;
	}

	.tabsBox view.active .tabsLine {
		width: 100%;
		position: absolute;
		bottom: -4px;
		left: 0;
		right: 0;
		height: 3px;
		border-radius: 2px;
	}

	.tabsBox view text {
		width: 100%;
		font-size: 13px;
	}

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

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

		height: auto;
	}

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

	.contentBox {
		height: 100%;
		margin-top: 10px;
		/* 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: 16rpx;
		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; */
		margin-top: 10upx;
		margin-bottom: 10upx;
		min-height: 60upx;
		max-height: 100upx;
		display: flex;
		font-size: 26rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #1b1d1e;
	}

	/**
	 * 头部固定
	 */
	.header {
		position: relative;
		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;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		font-size: 24rpx;
		color: #1b1d1e;
		/* background: #eee; */
		margin-bottom: 16rpx;
	}

	.isa {
		color: red;
	}

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