new Vue({
  el: "#app",
  
  data: {
    msg: '無限滾動日曆',
    currentDate: {
      year: 0, 
      month: 0, 
      date: 0
    },
    datesList: [],
    monthZh: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
    weeks: ['一', '二', '三', '四', '五', '六', '日'],
    showYear: 2022,
    showMonth: 1
  },
  created() {
    this.currentDate.year = new Date().getFullYear()
    this.currentDate.month = new Date().getMonth()
    this.currentDate.date = new Date().getDate()
    this.showMonth = this.currentDate.month
    this.getCoolDatesList(
        this.currentDate.year, this.currentDate.month, false
    )
  },    
  mounted() {
    this.$refs.calContent.addEventListener('scroll', this.coolScroll)
  },
  methods: {
    getCoolDatesList(year, month, next) {
      this.currentDate.year = year
      this.currentDate.month = month
      
      const monthFirstDate = new Date(year, month, 1)
      const monthLastDate = new Date(year, month + 1, 0)
      const currentMonthDates = new Date(year, month + 1, 0).getDate()
      
      // 第一週的日期格子
      const firstDateDay = monthFirstDate.getDay() === 0 ? 7 : monthFirstDate.getDay()
      let initFirstWeekDate = new Date(year, month, 2 - firstDateDay)
      // 最後一週的日期格子
      const lastWeekOverDates = 7 - monthLastDate.getDay() === 7 ? 0 : 7 - monthLastDate.getDay()
      
      // 加總該月份所有日期格子
      let totalDates
      if (next) { //下個月格數算法
        let newNextFirst // 新的第一天
        if (monthFirstDate.getDay() === 1) {
          newNextFirst = 0
        } else {
            newNextFirst = monthFirstDate.getDay() === 0 ? 7 : monthFirstDate.getDay()
            newNextFirst = 7 - newNextFirst + 1
            initFirstWeekDate = new Date(year, month, newNextFirst + 1)
        }
        totalDates = currentMonthDates - newNextFirst + lastWeekOverDates
        
      } else {  //初始化格數算法
        totalDates = firstDateDay - 1 + currentMonthDates + lastWeekOverDates
      }
      
      
      let dateObj
      for (let i = 0; i < totalDates; i++) {
        dateObj = new Date(
            initFirstWeekDate.getFullYear(),
            initFirstWeekDate.getMonth(),
            initFirstWeekDate.getDate() + i
        )
        this.datesList.push({
            year: dateObj.getFullYear(),
            month: dateObj.getMonth(),
            date: dateObj.getDate(),
            postLists: [],
            holiday: {},
            active: false
        })
      }
      
    },
    coolScroll(event){
      
      let height = event.target.clientHeight
      let totalHeight = event.target.scrollHeight
      let scrollValue = event.target.scrollTop
      console.log(scrollValue + height, height)
      
      if (scrollValue + height > height) {
        this.getCoolDatesList(
          this.currentDate.year, this.currentDate.month + 1, true
        )
      }
      
      // 該月進入畫面之中 更換月份 & 年份
      document.querySelectorAll('.thismonth').forEach((el) => {
          if (scrollValue > el.offsetTop - 100) {
              this.showMonth = parseInt(el.dataset.month)
              this.showYear = el.dataset.year
          }
      })
    }
  }
  
});