<template>
  <div class="calendar">
    <div class="calendar-header">
      <div class="left">
        <span class="month">{{ value.toString("yyyy年MM月") }}</span>
        <button @click="btnChangeMonth('prevMonth')">上个月</button>
        <button style="margin-left: 10px" @click="btnChangeMonth('nextMonth')">
          下个月
        </button>
      </div>
      <div class="right">
        <!-- 自定义右侧头部插槽 -->
        <slot name="right-header"></slot>
      </div>
    </div>

    <div class="calendar-body">
      <table class="table">
        <thead>
          <tr>
            <td>
              {{ week[firstDayOfWeek] }}
            </td>
            <td
              v-for="item in week.length - 1 - firstDayOfWeek"
              :key="week[item + firstDayOfWeek]"
            >
              {{ week[item + firstDayOfWeek] }}
            </td>
            <td v-for="item in firstDayOfWeek" :key="week[item - 1]">
              {{ week[item - 1] }}
            </td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in days.length / 7" :key="index">
            <td
              :class="{ empty: !days[day + index * 7 - 1].date }"
              v-for="day in 7"
              :key="day + index * 7"
            >
              <!-- 单元格日期自定义插槽 -->
              <slot name="dateCell" :row="days[day + index * 7 - 1]">
                {{
                  days[day + index * 7 - 1] &&
                  days[day + index * 7 - 1].date.split("-")[2]
                }}
              </slot>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Calendar",
  model: {
    prop: "value",
    event: "monthChange",
  },
  props: {
    value: [Date, String, Number],
    firstDayOfWeek: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      week: ["日", "一", "二", "三", "四", "五", "六"],
      days: [],
    };
  },
  methods: {
    btnChangeMonth(month) {
      // 上一月
      if (month === "prevMonth") {
        this.$emit("monthChange", this.getPrevNextMonth(this.value, -1));
      }
      // 下一月
      if (month === "nextMonth") {
        this.$emit("monthChange", this.getPrevNextMonth(this.value, 1));
      }
    },
    init() {
      const date = this.value;
      const time = date.toString("yyyy-MM");
      const firstDayOfWeek = this.firstDayOfWeek;
      // 当月周一是星期几 0-6 0是星期日
      const days = this.getMonthDay(date);
      const fillDay = [];
      let day = [];
      // 一个月多少天
      const monthDay = this.getDaysOfMonth(date);
      // 补全空格上月日期
      const fill = (7 + days - firstDayOfWeek) % 7;
      for (let i = 0; i < fill; i++) {
        fillDay.push({ date: "" });
      }

      for (let j = 1; j <= monthDay; j++) {
        let d = j.toString().padStart(2, "0");
        day.push({ date: time + "-" + d });
      }
      day = [...fillDay, ...day];
      // 补全空格下个月日期
      while (day.length % 7 != 0) {
        day.push({ date: "" });
      }
      this.$set(this, "days", day);
    },
    //获取当月的天数
    getDaysOfMonth(dateStr) {
      var date = new Date(dateStr);
      var year = date.getFullYear();
      var mouth = date.getMonth() + 1;
      var day = 0;

      if (mouth == 2) {
        day = this.isLeapYear(year) ? 29 : 28;
      } else if (
        mouth == 1 ||
        mouth == 3 ||
        mouth == 5 ||
        mouth == 7 ||
        mouth == 8 ||
        mouth == 10 ||
        mouth == 12
      ) {
        day = 31;
      } else {
        day = 30;
      }
      return day;
    },
    //判断是否为闰年
    isLeapYear(year) {
      return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
    },

    /**
     * 获取上一月或者下一个月
     * @param now 日期
     * @param addMonths 传-1 上个月,传1 下个月
     */
    getPrevNextMonth(now, addMonths) {
      var dd = new Date(now);
      var m = dd.getMonth() + 1;
      var y =
        dd.getMonth() + 1 + addMonths > 12
          ? dd.getFullYear() + 1
          : dd.getFullYear();
      if (m + addMonths == 0) {
        y = y - 1;
        m = 12;
      } else {
        if (m + addMonths > 12) {
          m = "01";
        } else {
          m = m + 1 < 10 ? "0" + (m + addMonths) : m + addMonths;
        }
      }
      return new Date(y, m, 0);
    },

    // 获取月份1号是周几
    getMonthDay(date) {
      var d = new Date(date);
      const y = d.getFullYear();
      const m = d.getMonth();
      return new Date(y, m, 1).getDay();
    },
  },
  created() {
    this.init();
  },
  watch: {
    value(val) {
      this.init();
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.calendar {
  width: 100%;
  background: #fff;
  .calendar-header {
    overflow: hidden;
    .left {
      float: left;
      .month {
        display: inline-block;
        width: 96px;
        font-size: 16px;
        line-height: 32px;
        font-weight: 500;
        color: #333;
      }
    }
    .right {
      float: right;
    }
  }
  .calendar-body {
    width: 100%;
    padding: 0 1px;
    overflow-y: auto;
    .table {
      width: 100%;
      border-collapse: collapse;
      box-sizing: border-box;
      thead {
        td {
          padding: 8px 0;
          text-align: center;
        }
      }
      tbody {
        td {
          width: 14.28%;
          height: 80px;
          border: 1px solid #ebeef5;
          font-size: 18px;
          padding: 8px 14px;
          color: #666;
          &.empty {
            background: #f9f9f9;
          }
        }
      }
    }
  }
}
</style>

// 自定义左侧头部
<Calendar v-model="new Date()">
    <div slot="right-header" style="color: red">自定义左侧头部</div>
</Calendar>

// 自定义日期
<Calendar v-model="new Date()">
    <template slot="dateCell" slot-scope="scope">
    {{ scope.row.date.split("-").slice(1).join("-") }}
    </template>
</Calendar>

// 自定义周起始日
<Calendar v-model="new Date()" :first-day-of-week="0"> </Calendar>