<template>
  <view class="content">
    <scroll-view
      :scroll-y="true"
      style="height: 100%; flex: 1; box-sizing: border-box"
    >
      <view class="header">
        <!-- <view class="bar"></view>
				<view class="set text-gray">
					<text @click="close" style="font-size:40upx;">返回</text>
					<text @click="reset" style="font-size:35upx;color:#DDDDDD">清空</text>
				</view> -->
        <!-- <view class="in-and-out">
					<view class="item" v-if="start.length > 0">
						<view style="font-size:30upx;color:#C0C0C0">入住日期</view>
						<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ startDay }}</view>
						<view style="font-size:24upx;margin-top:10upx">{{ startWeek }}</view>
					</view>
					<view class="item text" v-if="start.length == 0">
						<view>入住日期</view>
					</view>
					<view class="item">
						<view class="count-border" :class="day == 0 ? 'gray' : 'orange'">
							<view class="count" style="font-size:26upx;line-height:26upx;">共{{ day }}晚</view>
						</view>
					</view>
					<view class="item text" v-if="end.length == 0">
						<view>离店日期</view>
					</view>
					<view class="item" v-if="end.length > 0">
						<view style="font-size:30upx;color:#C0C0C0">离店日期</view>
						<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ endDay }}</view>
						<view style="font-size:24upx;margin-top:10upx">{{ endWeek }}</view>
					</view>
				</view> -->
        <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"
                  >￥{{ priceStauts[line][index] }}</view
                >
                <view v-if="priceStauts[line][index] < 0">售罄</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() {
      // if (this.priceStauts.length > 0) {
      // 	for (var i = this.start[0]; i <= this.end[0]; i++) {
      // 		if (i == this.start[0]) {
      // 			for (var j = this.start[1]; j < this.date[i].length; j++) {
      // 				if (this.priceStauts[i][j] == -1) return false
      // 			}
      // 		} else if (this.end[0] == this.start[0]) {
      // 			for (var j = this.start[1]; j < this.end[1]; j++) {
      // 				if (this.priceStauts[i][j] == -1) return false
      // 			}
      // 		} else if (i == this.end[0]) {
      // 			for (var j = 0; j < this.end[1]; j++) {
      // 				if (this.priceStauts[i][j] == -1) return false
      // 			}
      // 		} else {
      // 			for (var j = 0; j < this.priceStauts[i].length; j++) {
      // 				if (this.priceStauts[i][j] == -1) return false
      // 			}
      // 		}
      // 	}
      // }
      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: "",
    };
  },
  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();
    // #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) {
        console.log(this.lastNot);
        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];
                console.log(this.lastNot);
                return;
              }
            }
          } else {
            for (var j = 0; j < this.priceStauts[i].length; j++) {
              if (this.priceStauts[i][j] == -1) {
                this.lastNot = [i, j];
                console.log(this.lastNot);
                return;
              }
            }
          }
        }
        //清空
        this.lastNot = [];
      }
    },
  },
  methods: {
    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.startDate == `${year}-${m}-${d}`) {
              isexsit = true;
              if (x.remainNum > 0) {
                days.push(this.$utils.getretailer() ? x.b2BPrice : x.b2CPrice);
				//days.push(x.b2CPrice);
              } 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;
    },
    //清空
    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();
      console.log("执行了...");
      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) => {
        console.log(x.startDate, obj.start);
        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>
