<template>
  <div class="calendar_box">
    <div class="calendar_month">
      <!-- <i class="el-icon-arrow-left" @click="handleYear"></i>
      <span>{{ currentYear + "年" + currentMonth + "月" }}</span>
      <i class="el-icon-arrow-right" @click="handleMonth"></i> -->
      <!-- <el-date-picker
        style="margin-right: 10px"
        v-model="value3"
        type="year"
        placeholder="选择年"
        v-if="tabPosition === 'year'"
        @change="handleYear"
        value-format="yyyy"
      >
      </el-date-picker> -->
      <el-date-picker
        style="margin-right: 10px"
        v-model="value2"
        type="month"
        placeholder="选择月"
        value-format="yyyy-MM"
        v-if="tabPosition === 'month'"
        @change="handleMonth"
      >
      </el-date-picker>
      <!-- <el-radio-group v-model="tabPosition">
        <el-radio-button label="month">月</el-radio-button>
        <el-radio-button label="year">年</el-radio-button>
      </el-radio-group> -->
    </div>
    <!-- <div class="calendar_year" v-if="tabPosition === 'year'">
      <div
        class="calendar_year_item"
        v-for="(item, index) in months"
        :key="index"
      >
        {{ item }}
      </div>
    </div> -->
    <div class="calendar_week" v-if="tabPosition === 'month'">
      <div class="cal-cell1">周日</div>
      <div class="cal-cell1">周一</div>
      <div class="cal-cell1">周二</div>
      <div class="cal-cell1">周三</div>
      <div class="cal-cell1">周四</div>
      <div class="cal-cell1">周五</div>
      <div class="cal-cell1">周六</div>
    </div>
    <div class="calendar_days" v-if="tabPosition === 'month'">
      <div class="calendar_week_days" v-for="(day, index) in days" :key="index">
        <div class="cal_month_day" v-for="(item, idx) in day" :key="idx">
          <span
            @click="handleDay(item)"
            :class="{
              disabled: item.disabled,
              red: idx === 0 || idx === 6,
              active: currentDayValue === item.value,
            }"
            >{{ item.day }}</span
          >
          <div class="events_list" v-if="eventsTime.includes(item.value)">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { getCalendarEventsApi } from '@/apis'
export default {
  props: {
    eventsTime: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      datoObj: null,
      tabPosition: "month",
      value2: new Date(),
      value3: new Date(),
      currentDayValue: 0,
      currentMonth: null,
      currentYear: null,
      days: [], // 日历数据
      params: {}, // 活动查询参数
    };
  },
  methods: {
    handleDay(item) {
      const dateRange = [`${item.value} 00:00:00`, `${item.value} 23:59:59`];
      this.$emit("initList", {dateRange, type: false});
    },
    // 初始化日期
    initDate() {
      let now = !this.datoObj ? new Date() : new Date(this.datoObj.y, this.datoObj.m, 1);
      // 获取当前时间
      let y = now.getFullYear();
      let m = now.getMonth();
      // let d = now.getDate()
      // 当月最后一天是几号
      let _lastDateOfMonth = new Date(y, m + 1, 0).getDate();
      // 当月第一天是周几
      let _firstDayWeekOfMonth = new Date(y, m, 1).getDay();
      // 上月最后一天是几号
      let _lastDayOfLastMonth = new Date(y, m, 0).getDate();

      let line = 0;
      let temp = [];
      for (let i = 1; i <= _lastDateOfMonth; i++) {
        let _day = new Date(y, m, i).getDay(); // 返回星期几
        // 第一行
        if (_day === 0) {
          temp[line] = [];
          // 如果当月第一天就是周天，取查询参数值
          if (_firstDayWeekOfMonth === 0) {
            this.params.start = this.formatValue(y, m + 1, 1);
          }
        } else if (i === 1) {
          let k = 0;
          temp[line] = [];
          k = _lastDayOfLastMonth - _firstDayWeekOfMonth + 1;
          for (let j = 0; j < _firstDayWeekOfMonth; j++) {
            // 取查询参数值
            if (j === 0) {
              this.params.start = this.formatValue(y, m, k);
            }
            temp[line].push({
              day: k,
              disabled: true,
              value: this.formatValue(y, m, k),
            });
            k++;
          }
        }

        temp[line].push({
          day: i,
          value: this.formatValue(y, m + 1, i),
        });

        // 到周六，并且行数小于5时换行
        if (_day === 6 && line < 5) {
          line++;
          temp[line] = [];
        }
        // 如果到了当月最后一天
        if (i === _lastDateOfMonth) {
          // 下个月的时间补位
          let next = 1;
          let max = line === 5 ? 6 : 13;
          let d = _day;
          // 当最后一天是周六的时候，说明没占位，下个月占位需要为7位
          // 当最后一天不是周六的时候，说明占位了，那么下个月占位需要减1位
          if (_day === 6) {
            d = 0;
            max = 7;
          }
          for (; d < max; d++) {
            // 如果为周六，且行数小于5时候
            if (d === 6 && line < 5) {
              line++;
              temp[line] = [];
            }
            // 取查询参数值
            if (d === max - 1) {
              this.params.end = this.formatValue(y, m + 2, next);
            }
            temp[line].push({
              day: next,
              disabled: true,
              value: this.formatValue(y, m + 2, next),
            });
            next++;
          }
        }
      }
      this.days = temp;
      const dateRange = [`${y}-${m + 1}-01`, `${y}-${m + 1}-${_lastDateOfMonth}`];
      this.$emit("initList", {dateRange, type: true});
    },
    formatValue(y, m, d) {
      if (m > 12) {
        y += 1;
        m = 1;
      } else if (m < 1) {
        y -= 1;
        m = 12;
      }
      let _m = m > 9 ? m : "0" + m;
      let _d = d > 9 ? d : "0" + d;
      return y.toString() + '-' + _m + '-' + _d;
    },
    // 向前
    handleYear() {
      console.log(this.value3, "value2")
      // this.currentMonth -= 1;
      // if (this.currentMonth < 1) {
      //   this.currentMonth = 12;
      //   this.currentYear -= 1;
      // }
      // console.log(this.currentYear, this.currentMonth, "this.currentMonth");
      // this.initDate({ y: this.currentYear, m: this.currentMonth - 1 });
    },
    // 向后
    handleMonth() {
      if(this.value2) {
        const [ y, m ] = this.value2.split("-");
        this.datoObj = { y: y * 1, m: m - 1 }
        this.initDate();
      }
    },
  },
  mounted() {
    this.initDate();
    let _now = new Date();
    this.currentYear = _now.getFullYear();
    this.currentMonth = _now.getMonth() + 1;
    let d = _now.getDate();
    this.currentDayValue = this.formatValue(
      this.currentYear,
      this.currentMonth,
      d
    );
  },
};
</script>
<style lang="scss" scoped>
.calendar_box {
  width: 100%;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 20px;
}
.calendar_month {
  border: 1px solid #e1e1e1;
  height: 70px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding-left: 10px;
  span {
    margin: 0 30px;
    vertical-align: middle;
  }
  i {
    cursor: pointer;
    vertical-align: middle;
    font-size: 28px;
  }
}
.calendar_week {
  display: flex;
  border: 1px solid #e1e1e1;
  padding: 16px 0;
  margin: 1px 0;
  .cal-cell1 {
    flex: 1;
    font-weight: bolder;
    text-align: center;
  }
}
.calendar_year {
  padding: 20px;
  width: 100%;
  border: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
  .calendar_year_item {
    width: 130px;
    height: 130px;
    border: 1px solid #e1e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
  }
}
.calendar_week_days {
  display: flex;
  border-right: 1px solid #e1e1e1;
  .cal_month_day {
    flex: 1;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    position: relative;
    span {
      display: inline-block;
      font-size: 26px;
      transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.1s ease-in-out;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 80px;
      &.disabled {
        opacity: 0.25;
        pointer-events: none;
        cursor: default !important;
      }
      &.red {
        color: #d0021b;
      }
      &.active {
        color: #67C23A;
      }
    }
  }
}
.events_list {
  position: absolute;
  top: 20px;
  right: 50%;
  margin-right: -30px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: red;
}
</style>
