<template>
  <section class='m-calendar' :style="dateStyle">
    <!-- 切换月份 -->
    <header class='changeMonth'>
      <!-- <span class='prepMonth' @click="changeMonth(-1)"></span> -->
      <h1>{{ year }}年{{ month }}月</h1>
      <!-- <span class='nextMonth' @click="changeMonth(1)"></span> -->
    </header>
    <div class="box-shadow">
      <ul class='dates'>
        <!-- 星期 -->
        <li class='weeks' v-for="item in weeks" :key="item">{{ item }}</li>
        <!-- 日期 -->
        <li class='day' v-for="(item, i) in dates" :key="i" :class="{
          isPrep: item.isPrep,
          isNext: item.isNext,
          hidden: (item.isNext || item.isPrep) && !showPrepNext,
          isToday: item.date == today,
          isSelected: item.date == selectedDate,
          isMarked: markDates.includes(item.date)
        }" @click="clickDate(item)">{{ item.date == today ? '今' : item.day }}</li>
      </ul>
    </div>

  </section>
</template>
  
<script>
const D = new Date()
const ThisYear = D.getFullYear()
const ThisMonth = D.getMonth() + 1
const today = new Date().toLocaleDateString()
export default {
  // props都为非必传
  props: {
    // 初始年月
    startYearMonth: {
      type: String,
      default() {
        return `${ThisYear}/${ThisMonth}`
        // 格式：2021-1或2020-01或者2020/1或者2020/01
      }
    },
    // 需要标记的日期数组
    markDate: {
      type: Array,
      default() {
        return []
        // 格式：['2020-01-01', '2020-02-12']
      }
    },
    // 选中的日期
    checkedDate: {
      type: String,
      default() {
        return ''
        // 格式：'2020-01-01'
      }
    },
    // 是否星期一开始，默认星期日开始
    mondayStart: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 是否显示上个月和下个月日期
    showPrepNext: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 日期字体颜色
    fontColor: {
      type: String,
      default() {
        return '#000'
      }
    },
    // 标记点颜色
    markColor: {
      type: String,
      default() {
        return '#1e80ff'
      }
    },
    // 选中的日期字体颜色
    activeColor: {
      type: String,
      default() {
        return '#fff'
      }
    },
    // 选中的日期背景颜色
    activeBgColor: {
      type: String,
      default() {
        return '#1e80ff'
      }
    }
  },
  data() {
    return {
      // 当前年
      year: ThisYear,
      // 当前月
      month: ThisMonth,
      // 今天
      today,
      // 日期数组
      dates: [],
      // 选中的日期
      selectedDate: ''
    }
  },
  computed: {
    // 标记的日期
    markDates() {
      // 获得不带0的日期，如：2021/1/1  =>  2021/1/1
      return this.markDate.map(item => this.formatDate(item))
    },
    // 星期
    weeks() {
      if (this.mondayStart) {
        return ['一', '二', '三', '四', '五', '六', '日']
      } else {
        return ['日', '一', '二', '三', '四', '五', '六']
      }
    },
    dateStyle() {
      return {
        '--font-color': this.fontColor,
        '--mark-color': this.markColor,
        '--active-color': this.activeColor,
        '--active-bg-color': this.activeBgColor
      }
    }
  },
  created() {
    this.year = new Date(this.startYearMonth).getFullYear()
    this.month = new Date(this.startYearMonth).getMonth() + 1
    // 选中的日期
    if (this.checkedDate) {
      // 获得不带0的日期，如：2021-1-1  =>  2021/1/1
      this.selectedDate = this.formatDate(this.checkedDate)
    }
    // 初始化日历
    this.initCalendar()
  },
  methods: {
    // 初始化日历
    initCalendar() {
      // ⚠️注意：new Date中的month要减1才是真正的本月月数，即本月：this.month - 1，下个月：this.month
      // ⚠️注意：下个月的第0天即为本月的最后一天
      // 上个月总天数（本月第0天日期）
      const prepMonthDays = new Date(this.year, this.month - 1, 0).getDate()
      // 上个月最后一天星期几（本月第0天星期数）
      const prepMonthEndDayWeek = new Date(this.year, this.month - 1, 0).getDay()
      // 当前月总天数（下个月第0天日期）
      const thisMonthDays = new Date(this.year, this.month, 0).getDate()
      // 当前月第一天是星期几
      const firstDayWeek = new Date(this.year, this.month - 1, 1).getDay()
      // 当前月最后一天是星期几（下个月第0天星期数）
      const thisEndDayWeek = new Date(this.year, this.month, 0).getDay()
      var dates = []
      // 需要计算的总天数
      var totalDays = firstDayWeek + thisMonthDays
      // 从星期一开始index为1，从星期天开始index为0
      var index = this.mondayStart ? 1 : 0
      // 星期一开始且本月最后一天是星期天之后，需补满最后一行
      if (this.mondayStart && thisEndDayWeek > 0) {
        totalDays += 7 - thisEndDayWeek
      } else if (!this.mondayStart && thisEndDayWeek < 6) {
        // 星期天开始且本月最后一天是星期天之前，需补满最后一行
        totalDays += 6 - thisEndDayWeek
      }
      for (index; index < totalDays; index++) {
        // 上个月月底
        if (index < firstDayWeek) {
          // 上个月天数 - 上个月最后一天星期数 + 下标 (如：31 - 5 + 0)
          const day = prepMonthDays - prepMonthEndDayWeek + index
          const date = new Date(this.year, this.month - 2, day).toLocaleDateString()
          dates.push({ isPrep: true, day, date })
        } else if (index >= firstDayWeek + thisMonthDays) {
          // 下个月月初
          // 下标 - 当前月总天数 - 当前月第一天星期数 + 1 (如：30 - 31 + 1 + 1)
          const day = index - thisMonthDays - firstDayWeek + 1
          const date = new Date(this.year, this.month, day).toLocaleDateString()
          dates.push({ isNext: true, day, date })
        } else {
          // 本月
          // 下标 - 当前月第一天星期数 + 1 (如：5 - 5 + 1)
          const day = index - firstDayWeek + 1
          const date = new Date(this.year, this.month - 1, day).toLocaleDateString()
          dates.push({ day, date })
        }
      }
      this.dates = [...dates]
    },
    // 点击日期
    clickDate({ date, isPrep, isNext }) {
      if (isPrep || isNext) return
      this.selectedDate = date
      this.$emit('clickDate', date.replace(/\//g, '-'))
    },
    // 切换月份
    changeMonth(month) {
      this.month += month
      if (this.month === 0) {
        this.month = 12
        this.year--
      } else if (this.month === 13) {
        this.month = 1
        this.year++
      }
      this.initCalendar()
      this.$emit('changeMonth', `${this.year}-${this.month}`)
    },
    // 格式化日期
    formatDate(date) {
      // 获得不带0，且分隔符为/的日期，如：2020-01-01  =>  2021/1/1
      return new Date(date).toLocaleDateString()
    }
  }
}
</script>
  
<style lang='scss' scoped>
$fontColor: var(--font-color);
$markColor: var(--mark-color);
$activeColor: var(--active-color);
$activeBgColor: var(--active-bg-color);

.m-calendar {
  max-width: 720px;
  max-height: 810px;
  //   border: 1px solid #054C96;
  border-radius: 8px 8px 0 0;
  padding-bottom: 20px;

  header {
    display: flex;
    align-items: center;
    justify-content: center;
    // border-bottom: 1px solid #054C96;
    padding: 20px 0;
    margin-bottom: 5px;

    h1 {
      margin: 0 20px;
      color: #444;
      font-size: 20px;
      font-weight: bold;
      width: 120px;
      text-align: center;
    }

    span {
      cursor: pointer;
      padding: 4px 10px;

      &::after {
        display: inline-block;
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid $fontColor;
      }

      &.prepMonth::after {
        border-left: 2px solid $fontColor;
        transform: rotate(-45deg);
      }

      &.nextMonth::after {
        border-right: 2px solid $fontColor;
        transform: rotate(45deg);
      }

      &:hover::after {
        border-color: $markColor;
      }
    }
  }

  .box-shadow {
    border-radius: 5px;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    ul {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      padding: 0 12px;

      li {
        width: 42px;
        height: 42px;
        margin: 20px calc((100% / 7 - 42px) / 2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        position: relative;
        transition: all ease .25s;
        border-radius: 6px;

        // 标记
        &::after {
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;
          display: inline-block;
          content: '';
          width: 5px;
          height: 5px;
          border-radius: 50%;
        }

        // 星期
        &.weeks {
          font-size: 18px;
          color: #444;
          margin-bottom: 12px;
        }

        &.day {
          cursor: pointer;
          font-size: 20px;
          color: $fontColor;

          // 今天
          &.isToday {
            color: $markColor;
          }

          // 标记
          &.isMarked::after {
            transition: all ease .25s;
            background: $markColor;
          }

          // 选中、hover
          &:hover,
          &.isSelected {
            background: $activeBgColor;
            color: $activeColor;

            &:after {
              display: none;
            }
          }

          // 上个月、下个月
          &.isNext,
          &.isPrep {
            cursor: default;
            opacity: .3;

            &:hover {
              color: $fontColor;
              opacity: .3;
              background: transparent;
            }
          }

          // hidden
          &.hidden {
            opacity: 0;

            &:hover {
              opacity: 0;
            }
          }
        }
      }
    }
  }

}</style>
  