<template>
  <!-- <transition :name="transition"> -->
  <div class="calendar-tz" v-if="isShow" :class="isFixed && 'fixed'">
    <slot name="header"></slot>
    <view
      style="
        width: 100%;
        height: 40px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
      "
    >
      <u-icon name="close" color="#111111" size="48" @click="closeHandler" />
      <!-- //三角形 -->
      <view class="sjx"></view>
    </view>
    <div class="week-number">
      <span
        v-for="(item, index) in weekList"
        :style="{
          color: (index == 0 || index == weekList.length - 1) && themeColor,
        }"
        :key="index"
        >{{ item }}</span
      >
    </div>
    <p class="tips" v-if="title">{{ title }}</p>
    <div class="content" id="scrollWrap">
      <div
        class="con"
        v-for="(item, index) in calendar"
        :key="index"
        :id="item.year + '' + item.month"
      >
        <h3 v-text="item.year + '年' + item.month + '月'"></h3>
        <span class="month-bg" :style="{ color: getBetweenColor }">{{
          item.month
        }}</span>
        <ul class="each-month">
          <li
            class="each-day"
            v-for="(day, idx) in item.dayList"
            :key="idx"
            :class="[addClassBg(day, item.month, item.year)]"
            :style="{ background: themeOpacityBg(day, item.month, item.year) }"
            @click="chooseDate(day, item.month, item.year)"
          >
            <div
              :class="[addClassName(day, item.month, item.year)]"
              :style="{ background: themeBg(day, item.month, item.year) }"
            >
              <p class="day-tip" :style="{ color: themeColor }">
                <i v-text="setTip(day, item.month, item.year, 1)"></i>
              </p>
              <p class="day">{{ day ? day : "" }}</p>
              <p class="recent">
                <i v-text="setTip(day, item.month, item.year, 2)"></i>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <slot name="footer"></slot>
  </div>
  <!-- </transition> -->
</template>

<script>
export default {
  props: {
    isShow: {
      //是否显示
      type: [Boolean],
      default() {
        return false;
      },
    },
    isFixed: {
      //是否定位全屏
      type: [Boolean],
      default() {
        return true;
      },
    },
    transition: {
      //动画类型slide
      type: [String],
      default() {
        return "";
      },
    },
    title: {
      //头部的一段文本
      type: [String, Object],
      default() {
        return "";
      },
    },
    mode: {
      //模式：1普通日历，2酒店，3飞机往返
      type: [String, Number],
      default() {
        return 1;
      },
    },
    startDate: {
      //开始日期
      type: [String, Object, Date],
    },
    endDate: {
      //结束日期
      type: [String, Object, Date],
    },
    betweenStart: {
      //日历可选范围开始
      type: [String, Object, Date],
      default() {
        return "";
      },
    },
    betweenEnd: {
      //日历可选结束日期
      type: [String, Object, Date],
      default() {
        return "";
      },
    },
    initMonth: {
      //初始化的月数
      type: [String, Number],
      default() {
        return 6;
      },
    },
    themeColor: {
      //主题色
      type: [String],
      default: "#111111",
    },
  },
  data() {
    return {
      startDates: "",
      endDates: "",
      betweenStarts: "",
      betweenEnds: "",
      calendar: [],
      weekList: ["日", "一", "二", "三", "四", "五", "六"],
    };
  },
  watch: {
    isShow() {
      this.init();
    },
    betweenStart() {
      this.init();
    },
    betweenEnd() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {
    //设置主题色入住离开之间的背景色
    getBetweenColor() {
      if (!this.themeColor) return;
      var hex = this.themeColor;
      if (hex.length == 4) {
        hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
      }
      var str =
        "rgba(" +
        parseInt("0x" + hex.slice(1, 3)) +
        "," +
        parseInt("0x" + hex.slice(3, 5)) +
        "," +
        parseInt("0x" + hex.slice(5, 7)) +
        ",0.1)";
      return str;
    },
  },
  methods: {
    init() {
      var date = new Date();
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
      this.day = date.getDate();
      this.today = new Date(this.year + "/" + this.month + "/" + this.day) * 1;
      if (!this.startDate) {
        const year = date.getFullYear(),
          month = date.getMonth() + 1,
          day = date.getDate();
        this.startDates = this.resetTime(year + "/" + month + "/" + day);
        this.startYear = year;
        this.startMonth = month;
      } else {
        this.startDates = this.resetTime(this.startDate);
        var dd = this.startDate.replace(/-/g, "/").split("/");
        this.startYear = dd[0];
        this.startMonth = dd[1];
      }
      if (!this.endDate) {
        // var temp = this.startDates + 24 * 60 * 60 * 1000;
        // var dateTemp = new Date(temp);
        // const year = dateTemp.getFullYear(),
        //     month = dateTemp.getMonth() + 1,
        //     day = dateTemp.getDate();
        // this.endDates = this.resetTime(year + "/" + month + "/" + day);
        // this.endYear = year;
        // this.endMonth = month;
      } else {
        this.endDates = this.resetTime(this.endDate);
        var dd = this.endDate.replace(/-/g, "/").split("/");
        this.endYear = dd[0];
        this.endMonth = dd[1];
      }
      this.betweenStarts = this.resetTime(this.betweenStart);
      this.betweenEnds = this.resetTime(this.betweenEnd);
      this.createClendar(); //创建日历数据
    },
    //创建每个月日历数据，传入月份1号前面用null填充
    createDayList(month, year) {
      const count = this.getDayNum(month, year),
        _week = new Date(year + "/" + month + "/1").getDay();
      let list = [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27, 28,
      ];
      for (let i = 29; i <= count; i++) {
        list.push(i);
      }
      for (let i = 0; i < _week; i++) {
        list.unshift(null);
      }
      return list;
    },
    //计算传入月份有多少天
    getDayNum(month, year) {
      let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        dayNum[1] = 29;
      }
      return dayNum[month - 1];
    },
    //根据当天和结束日期创建日历数据
    createClendar() {
      var yearTemp = this.year;
      var monthTemp = this.month;
      if (!!this.betweenStarts) {
        //如果有范围起始日期，可选范围从betweenStart开始
        yearTemp = new Date(this.betweenStarts).getFullYear();
        monthTemp = new Date(this.betweenStarts).getMonth() + 1;
      }
      this.calendar = [];
      for (let i = 0; i < this.initMonth; i++) {
        let year = yearTemp;
        let month = monthTemp + i;
        let _monthData = {
          dayList: [],
          month: "",
          year: "",
        };
        var m = Math.ceil(month / 12);
        if (m > 0) {
          year += m - 1;
        } else {
          year += m - 1;
        }
        if (month > 12) {
          month = month % 12 == 0 ? 12 : month % 12;
        }
        if (month <= 0) {
          month = 12 + (month % 12);
        }
        _monthData.year = year;
        _monthData.month = month;
        _monthData.dayList = this.createDayList(month, year);
        this.calendar.push(_monthData);
      }
      //h5默认页面加载到当前日期start-date的位置
      if (document) {
        this.scrollTop(this.startYear, this.startMonth);
      }
    },
    scrollTop(year, month) {
      var id = year + "" + parseInt(month);
      setTimeout(() => {
        var obj = document.getElementById(id);
        if (!obj) return;
        var wrap = document.getElementById("scrollWrap");
        wrap.scrollTop = obj.offsetTop - 40;
      }, 0);
    },
    //添加日历样式
    addClassName(day, month, year) {
      if (!day) return;
      const _date = new Date(year + "/" + month + "/" + day);
      let className = [];
      // if (_date.getDay() == 0 || _date.getDay() == 6) { //周末或周六样式
      //     className.push('weekend')
      // }
      if (_date * 1 == this.today) {
        className.push("today");
      }
      if (this.mode == 1) {
        if (_date * 1 == this.startDates) {
          className.push("trip-time");
        }
      } else {
        if (_date * 1 == this.startDates || _date * 1 == this.endDates) {
          className.push("trip-time");
        }
      }
      if (this.betweenStarts) {
        _date * 1 < this.betweenStarts && className.push("disabled");
      } else {
        _date * 1 < this.today && className.push("disabled"); //当天和结束日期之外不可选
      }
      _date * 1 > this.betweenEnds && className.push("disabled");
      return className.join(" ");
    },
    //入住离开的区间背景色
    addClassBg(day, month, year) {
      if (!day) return;
      const _date = this.resetTime(year + "/" + month + "/" + day);
      let className = [];
      if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
        className.push("between");
      }
      return className.join(" ");
    },
    //theme入住离开的区间背景色
    themeOpacityBg(day, month, year) {
      if (!this.themeColor) return;
      if (!day) return;
      const _date = this.resetTime(year + "/" + month + "/" + day);
      if (_date >= this.startDates && _date <= this.endDates && this.mode > 1) {
        return this.getBetweenColor;
      }
    },
    //theme获取普通日期选中样式背景
    themeBg(day, month, year) {
      if (!this.themeColor) return;
      const _date = this.resetTime(year + "/" + month + "/" + day);
      //正常模式
      if (this.mode == 1) {
        if (_date == this.startDates) {
          return this.themeColor;
        }
      } else {
        //酒店和往返模式
        if (_date == this.startDates || _date == this.endDates) {
          return this.themeColor;
        }
      }
    },
    //清除时间 时 分 秒 毫秒
    resetTime(dateStr) {
      var date = new Date(dateStr.replace(/-/g, "/"));
      date.setHours(0);
      date.setMinutes(0);
      date.setSeconds(0);
      date.setMilliseconds(0);
      return date * 1;
    },
    //flag==1（返回今天，明天，后天)，flag==2（返回入住，离开，去返)
    setTip(day, month, year, flag) {
      if (!day) return;
      var tip = "";
      var _date = this.resetTime(year + "/" + month + "/" + day);
      if (flag == 1) {
        if (_date == this.today) {
          tip = "今天";
        } else if (_date - this.today == 24 * 3600 * 1000) {
          tip = "明天";
        } else if (_date - this.today == 2 * 24 * 3600 * 1000) {
          tip = "后天";
        }
        return tip;
      } else {
        if (this.mode == 2) {
          if (_date == this.endDates) {
            tip = "离开";
          } else if (_date == this.startDates) {
            tip = "入住";
          }
        } else if (this.mode == 3) {
          if (_date == this.startDates && !this.endDates) {
            tip = "去/返";
          } else {
            if (_date == this.endDates) {
              tip = "返程";
            } else if (_date == this.startDates) {
              tip = "去程";
            }
          }
        }
        return tip;
      }
    },
    //是否是选中当天，或者入住离开当天
    isCurrent(day, month, year) {
      if (!day) {
        return false;
      }
      const _date = this.resetTime(year + "/" + month + "/" + day);
      //正常模式
      if (this.mode == 1) {
        if (_date == this.startDates) {
          return true;
        }
      } else {
        //酒店和往返模式
        if (_date == this.startDates || _date == this.endDates) {
          return true;
        }
      }
    },
    dateFormat(times) {
      let date = new Date(times);
      let recent = "";
      if (times == this.today) {
        recent = "今天";
      } else if (times - this.today === 24 * 3600 * 1000) {
        recent = "明天";
      } else if (times - this.today === 2 * 24 * 3600 * 1000) {
        recent = "后天";
      }
      var year = date.getFullYear();
      var month =
        parseInt(date.getMonth() + 1) > 9
          ? parseInt(date.getMonth() + 1)
          : "0" + parseInt(date.getMonth() + 1);
      var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return {
        dateStr: year + "-" + month + "-" + day,
        week: "周" + this.weekList[date.getDay()],
        recent,
      };
    },
    chooseDate(day, month, year) {
      const _date = this.resetTime(year + "/" + month + "/" + day);
      const week = this.weekList[new Date(_date).getDay()];
      //判断日期区域是否可点击
      if (!day) return;
      if (this.betweenStarts) {
        if (_date * 1 < this.betweenStarts) return;
      } else {
        if (_date < this.today) return;
      }
      if (_date > this.betweenEnds) return;
      //判断酒店或者往返模式的选择逻辑
      if (this.startDates && this.endDates && _date > this.endDates) {
        this.startDates = _date;
        this.endDates = "";
      } else if (this.endDates && _date > this.endDates) {
        this.endDates = _date;
      } else if (_date >= this.startDates && _date <= this.endDates) {
        this.startDates = _date;
        this.endDates = "";
      } else if (_date < this.startDates) {
        this.startDates = _date;
        this.endDates = "";
      } else if (_date > this.startDates) {
        if (this.mode == 1) {
          this.startDates = _date;
        } else {
          this.endDates = _date;
        }
      }
      const choose = {
        startStr: this.dateFormat(this.startDates),
      };
      if (this.mode == 1) {
        this.$emit("callback", choose);
      } else if (this.mode == 2 && this.startDates && this.endDates) {
        choose.dayCount = (this.endDates - this.startDates) / 24 / 3600 / 1000;
        choose.endStr = this.dateFormat(this.endDates);
        this.$emit("callback", choose);
      } else if (this.mode == 3) {
        if (this.startDates && this.endDates) {
          choose.dayCount =
            (this.endDates - this.startDates) / 24 / 3600 / 1000;
          choose.endStr = this.dateFormat(this.endDates);
        } else if (this.startDates && !this.endDates) {
          choose.dayCount = 0;
          choose.endStr = this.dateFormat(this.startDates);
        }
        this.$emit("callback", choose);
      }
    },
    closeHandler() {
      //关闭按钮
      this.$emit("closeback");
    },
  },
};
</script>

<style lang="less" scoped>
@color: #111111;
.calendar-tz {
  width: 100%;
  height: 100vh;
  background: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  &.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 122px;
    z-index: 900;
  }
  .sjx {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;
    position: absolute;
    right: 23px;
    top: -7px;
  }
  .week-number {
    background: #fff;
    padding: 0 1%;
    box-shadow: 0 2px 15px rgba(100, 100, 100, 0.1);
    span {
      display: inline-block;
      text-align: center;
      padding: 12px 0;
      font-size: 14px;
      width: 14.28%;
      &:first-child,
      &:last-child {
        color: @color;
      }
    }
  }
  .tips {
    padding: 6px 10px;
    background: #fff7dc;
    font-size: 12px;
    color: #9e8052;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content {
    -webkit-box-flex: 1;
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 113rpx;
    .con {
      color: #333;
      padding-top: 10px;
      position: relative;
      h3 {
        width: 100%;
        font-weight: normal;
        text-align: center;
        font-size: 16px;
        padding: 10px 0;
      }
      .month-bg {
        position: absolute;
        text-align: center;
        opacity: 0.4;
        left: 0;
        right: 0;
        bottom: 0;
        top: 20%;
        font-size: 220px;
        font-weight: bold;
        color: #f8f8f8;
      }
      .each-month {
        display: block;
        width: 98%;
        font-size: 0;
        margin: 0 auto;
        padding-left: 0;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        .each-day {
          position: relative;
          display: inline-block;
          text-align: center;
          vertical-align: middle;
          width: 14.28%;
          font-size: 16px;
          height: 50px;
          margin: 2px auto;
          div {
            display: inline-block;
            font-size: 14px;
            width: 98%;
            height: 100%;
            justify-content: space-around;
            display: -webkit-box;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            border-radius: 4px;
          }
          &.between {
            background: rgba(75, 217, 173, 0.1);
          }
          .day {
            font-size: 16px;
          }
          .day-tip,
          .recent {
            font-size: 10px;
            height: 14px;
            i {
              font-size: 10px;
            }
          }
          .recent {
            color: #ccc;
          }
          .disabled {
            color: #ccc !important;
            .day-tip {
              color: #ccc !important;
            }
          }
          .today {
            background: rgba(100, 100, 100, 0.1);
          }
          .trip-time {
            background: @color;
            color: #fff !important;
            .recent,
            .day-tip {
              color: #fff !important;
            }
          }
          .weekend {
            color: @color;
          }
        }
      }
    }
  }
}
/***右侧进入动画***/
.slide-enter-active,
.slide-leave-active {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.slide-enter,
.slide-leave-to {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
</style>