<script setup lang="ts">
import { ref, computed } from 'vue';
import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
const currentMonth = ref(new Date().getMonth());
const currentYear = ref(new Date().getFullYear());
const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);

// 获取指定月份信息的基础函数
const getFirstDayOfMonth = (year: number, month: number): number => {
  return new Date(year, month, 1).getDay();
};

const getDaysInMonth = (year: number, month: number): number => {
  return new Date(year, month + 1, 0).getDate();
};

// 优化后的日历生成函数
const generateCalendarData = (
    year: number,
    month: number
): Array<Array<{ day: number; isCurrentMonth: boolean; isCurrentDay: boolean }>> => {
  const weeks: Array<Array<{ day: number; isCurrentMonth: boolean; isCurrentDay: boolean }>> = [];
  const daysInMonth = getDaysInMonth(year, month);
  const firstDayIndex = getFirstDayOfMonth(year, month);

  // 动态获取当前日期
  const currentDate = new Date();
  const currentDay = currentDate.getDate();
  const currentMonthValue = currentDate.getMonth();
  const currentYearValue = currentDate.getFullYear();

  // 计算前后月信息
  const prevMonth = month === 0 ? 11 : month - 1;
  const nextMonth = month === 11 ? 0 : month + 1;
  const prevYear = month === 0 ? year - 1 : year;
  const nextYear = month === 11 ? year + 1 : year;

  const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
  const daysInNextMonth = getDaysInMonth(nextYear, nextMonth);

  let dayCounter = 1;
  let nextMonthDayCounter = 1;

  for (let week = 0; week < 5; week++) {
    const weekDays = [];

    for (let day = 0; day < 7; day++) {
      const isFirstWeek = week === 0;
      const position = week * 7 + day;

      // 当前月日期
      if ((isFirstWeek && day >= firstDayIndex) || (!isFirstWeek && dayCounter <= daysInMonth)) {
        const isToday = dayCounter === currentDay && month === currentMonthValue && year === currentYearValue;
        weekDays.push({ day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday });
        dayCounter++;
      }
      // 前月日期
      else if (isFirstWeek) {
        const prevDay = daysInPrevMonth - firstDayIndex + day + 1;
        weekDays.push({ day: prevDay, isCurrentMonth: false, isCurrentDay: false });
      }
      // 下月日期
      else {
        weekDays.push({ day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false });
        nextMonthDayCounter++;
      }
    }

    weeks.push(weekDays);
  }

  return weeks;
};

// 使用示例
const calendarData = computed(() => generateCalendarData(currentYear.value, currentMonth.value));

// 切换月份
const prevMonth = () => {
  if (currentMonth.value === 0) {
    currentMonth.value = 11;
    currentYear.value -= 1;
  } else {
    currentMonth.value -= 1;
  }
  selectedDate.value = null;
};

const nextMonth = () => {
  if (currentMonth.value === 11) {
    currentMonth.value = 0;
    currentYear.value += 1;
  } else {
    currentMonth.value += 1;
  }
  selectedDate.value = null;
};
const emit=defineEmits(['dateClick']);
const handleDateClick = (day: number) => {
    selectedDate.value = { day, isCurrentMonth:true };
   emit('dateClick',`${currentYear.value}-${currentMonth.value + 1}-${day}` )
};
</script>

<template>
  <div class="calendar-wrapper">
    <div class="header">
      <span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span>
      <span class="current">{{ currentYear }}年{{ currentMonth + 1 }}月</span>
      <span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span>
    </div>
    <div class="row">
      <div class="item">
        <span class="tip">日</span>
      </div>
      <div class="item">
        <span class="tip">一</span>
      </div>
      <div class="item">
        <span class="tip">二</span>
      </div>
      <div class="item">
        <span class="tip">三</span>
      </div>
      <div class="item">
        <span class="tip">四</span>
      </div>
      <div class="item">
        <span class="tip">五</span>
      </div>
      <div class="item">
        <span class="tip">六</span>
      </div>
    </div>
    <div v-for="item in calendarData" class="row">
      <div class="item" v-for="subItem in item" @click="handleDateClick(subItem.day)">
        <span :class="[
          subItem.isCurrentDay ? 'currentDay' : '',
          subItem.isCurrentMonth ? '' : 'otherMonth',
          selectedDate && selectedDate.day === subItem.day && selectedDate.isCurrentMonth === subItem.isCurrentMonth ? 'selectedDay' : ''
        ]">
          {{ subItem.isCurrentDay ? "今" : subItem.day }}
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.calendar-wrapper {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    .current{
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      font-style: normal;
      margin-bottom: 8px;
    }

    .btn {
      padding: 5px 10px;
      font-size: 14px;
      color: #1677FE;
      background-color: #FFF;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background-color: #1677FE;
        color: #FFF;
      }
    }
  }
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding:0 20px 20px;
  background-color: #FFF;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;

  .row {
    flex: 1;
    width: 100%;
    background: #F9FAFC ;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    color: #999999;
    font-style: normal;
    .item {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        margin: auto;
        height: 28px;
        width: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 14px;
        color: #666666;
        font-style: normal;
        border-radius:14px;
        cursor: pointer;
      }
      .currentDay {
        background: #1677FE;
        color: #fff;
      }
      .otherMonth{
        color: #999;
      }
      .selectedDay {
        background: #FFA500;
        color: #fff;
      }
    }
  }
}
</style>
