<template>
  <view class="calendar">
    <view class="header">
      <text @click="changeMonth(-1)">《</text>
      <text>{{ currentYear }}年{{ currentMonth + 1 }}月</text>
      <text @click="changeMonth(1)">》</text>
    </view>
    <view class="weekdays">
      <text v-for="day in weekdays" :key="day">{{ day }}</text>
    </view>
    <view class="days">
      <view
        v-for="day in days"
        :key="day.date"
        :class="{ 'current-month': day.currentMonth, 'other-month': !day.currentMonth }"
        @click="selectDate(day)"
      >
        <text>{{ day.day }}</text>
        <!-- <view>999</view> -->
        <view v-if="day.customContent" class="custom-content">
          {{ day.customContent }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth(),
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      days: [],
      customDates: {
        '2023-06-15': '自定义内容'
      }
    }
  },
  mounted() {
    this.generateCalendar()
  },
  methods: {
    generateCalendar() {
      const firstDay = new Date(this.currentYear, this.currentMonth, 1)
      const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)
      const daysInMonth = lastDay.getDate()
      const startingDay = firstDay.getDay()

      this.days = []

      for (let i = 0; i < startingDay; i++) {
        const prevMonthLastDay = new Date(this.currentYear, this.currentMonth, 0).getDate()
        this.days.push({
          day: prevMonthLastDay - startingDay + i + 1,
          currentMonth: false,
          date: new Date(this.currentYear, this.currentMonth - 1, prevMonthLastDay - startingDay + i + 1)
        })
      }

      for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(this.currentYear, this.currentMonth, i)
        const dateString = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(i).padStart(
          2,
          '0'
        )}`
        this.days.push({
          day: i,
          currentMonth: true,
          date: date,
          customContent: this.customDates[dateString]
        })
      }

      const remainingDays = 42 - this.days.length
      for (let i = 1; i <= remainingDays; i++) {
        this.days.push({
          day: i,
          currentMonth: false,
          date: new Date(this.currentYear, this.currentMonth + 1, i)
        })
      }
    },
    changeMonth(delta) {
      this.currentMonth += delta
      if (this.currentMonth > 11) {
        this.currentMonth = 0
        this.currentYear++
      } else if (this.currentMonth < 0) {
        this.currentMonth = 11
        this.currentYear--
      }
      this.generateCalendar()
    },
    selectDate(day) {
      console.log('选择的日期', day.date)
      // 在这里可以添加选择日期后的逻辑
    }
  }
}
</script>

<style scoped>
.calendar {
  width: 100%;
  /* padding: 20rpx; */
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.weekdays {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10rpx;
}
.days {
  display: flex;
  flex-wrap: wrap;
}
.days view {
  width: 14.28%;
  height: 80rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.other-month {
  color: #ccc;
}
.custom-content {
  font-size: 20rpx;
  color: #007aff;
}
</style>
