MonthDate.vue

<template>
  <view class="month-date-container">
    <!-- 年月切换和当前月按钮 -->
    <view class="header">
      <view class="month-year">

        <uv-text style="max-width: 200rpx;" bold :text="currentMonthName + ' ' + currentYear"  color="#333" size="36rpx" lines="1" class="month-year-text" v-if="isValidDate">
        </uv-text>
        <text class="month-year-text" v-else></text>
        <view class="month-controls">
          <image
            class="control-arrow"
            src="/static/message/calader/left.png"
            @tap="prevMonth"
          ></image>
          <image
            class="control-arrow"
            src="/static/message/calader/right.png"
            @tap="nextMonth"
          ></image>
        </view>
      </view>
      <view class="this-month-btn" @tap="goToCurrentMonth">
        <!-- <image class="this-month-icon" src="/static/message/calader/thismonth-bg.png"></image> -->
        <text class="this-month-text">{{ t("TaskNotice.thisMonth") }}</text>
      </view>
    </view>

    <!-- 星期标题 -->
    <view class="weekdays">
      <view class="weekday" v-for="day in weekdays" :key="day">
        <text class="weekday-text">{{ day }}</text>
      </view>
    </view>

    <!-- 日历面板 -->
    <view class="calendar-grid">
      <view
        class="calendar-day"
        v-for="(day, index) in calendarDays"
        :key="index"
        :class="{
          'current-month': day.currentMonth,
          today: day.isToday,
          selected: isSelectedDate(day.date),
          'invalid-date': !day.isValid,
          'other-month': !day.currentMonth,
          'max-date': isMaxDate(day.date),
          'min-date': isMinDate(day.date),
          'future-date': isAfterToday(day.date),
        }"
        @tap="day.isValid && !isAfterToday(day.date) && selectDate(day)"
      >
        <text class="day-number">{{ day.day }}</text>
        <text
          class="notification-count"
          v-if="day.isValid && day.notificationCount > 0"
          >{{ formatNumber(day.notificationCount) }}</text
        >
        <!-- 占位 -->
        <text v-else class="notification-count">{{ isAfterToday(day.date) ? '' : '0' }}</text>
        <!-- 不是当天 -->
        <view v-if="!day.isToday">
          <view v-if="isMaxDate(day.date)">
            <image
              class="max-icon"
              src="/static/message/calader/MaxBg.png"
            ></image>
          </view>
          <view v-else-if="isMinDate(day.date)">
            <image
              class="min-icon"
              src="/static/message/calader/MinBg.png"
            ></image>
          </view>
        </view>
        <view v-else>
          <view v-if="isMaxDate(day.date)">
            <image
              class="max-icon"
              src="/static/message/calader/todayMaxBg.png"
            ></image>
          </view>
          <view v-else-if="isMinDate(day.date)">
            <image
              class="min-icon"
              src="/static/message/calader/todayMinBg.png"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 图例部分 -->
    <view class="legend-container">
      <view class="legend-item">
        <view class="legend-dot selected-dot"></view>
        <text class="legend-text">{{ t("TaskNotice.currentDate") }}</text>
      </view>
      <view class="legend-item">
        <view class="legend-dot max-dot"></view>
        <text class="legend-text">{{ t("TaskNotice.mostAlarmNum") }}</text>
      </view>
      <view class="legend-item">
        <view class="legend-dot min-dot"></view>
        <text class="legend-text">{{ t("TaskNotice.leastAlarm") }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { t } from "@/plugins/index.js";
import { formatNumber } from "@/utils";
// 定义属性
const props = defineProps({
  // 初始日期，默认为当前日期
  initialDate: {
    type: Date,
    default: () => new Date(),
  },
  // 通知数据，格式为 { '2023-05-01': 5, '2023-05-02': 3 }
  notifications: {
    type: Object,
    default: () => ({}),
  },
  // 跳转页面的路径
  targetPage: {
    type: String,
    default: "",
  },
  // 最大通知日期
  maxDate: {
    type: Date,
    default: null,
  },
  // 最小通知日期
  minDate: {
    type: Date,
    default: null,
  },
});

// 定义事件
const emit = defineEmits([
  "dateSelected",
  "prevMonth",
  "nextMonth",
  "goToCurrentMonth",
]);

// 星期几
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

// 月份名称
// const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
//                     'July', 'August', 'September', 'October', 'November', 'December'];

// 当前显示的日期
const currentDate = ref(new Date(props.initialDate));

// 选中的日期
const selectedDate = ref(null);

// 判断日期是否有效（检查是否是实际存在的日期）
const isValidDate = computed(() => {
  return !isNaN(currentDate.value.getTime());
});
const getI18nKey = (key) => {
  return t(key);
};
const monthNames = computed(() => {
  return [
    getI18nKey("app.common.Jan"),
    getI18nKey("app.common.Feb"),
    getI18nKey("app.common.Mar"),
    getI18nKey("app.common.Apr"),
    getI18nKey("app.common.May"),
    getI18nKey("app.common.Jun"),
    getI18nKey("app.common.Jul"),
    getI18nKey("app.common.Aug"),
    getI18nKey("app.common.Sept"),
    getI18nKey("app.common.Oct"),
    getI18nKey("app.common.Nov"),
    getI18nKey("app.common.Dec"),
  ];
});
// 当前年份
const currentYear = computed(() =>
  isValidDate.value ? currentDate.value.getFullYear() : ""
);

// 当前月份名称
const currentMonthName = computed(() => {
  console.log(
    monthNames.value[currentDate.value.getMonth()],
    "---测试",
    currentDate.value.getMonth()
  );
  return monthNames.value[currentDate.value.getMonth()];
});

// 计算日历数据
const calendarDays = computed(() => {
  if (!isValidDate.value) return [];

  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth();

  // 当月第一天
  const firstDay = new Date(year, month, 1);
  // 当月最后一天
  const lastDay = new Date(year, month + 1, 0);

  // 当月第一天是星期几
  const firstDayOfWeek = firstDay.getDay();
  // 当月天数
  const daysInMonth = lastDay.getDate();

  // 上个月最后一天
  const prevMonthLastDay = new Date(year, month, 0).getDate();

  const days = [];

  // 添加上个月的日期
  for (let i = 0; i < firstDayOfWeek; i++) {
    const day = prevMonthLastDay - firstDayOfWeek + i + 1;
    const date = new Date(year, month - 1, day);

    // 检查日期是否有效
    const isValid = checkValidDate(year, month - 1, day);
    const dateString = formatDate(date);

    days.push({
      day,
      date,
      currentMonth: false,
      isToday: isToday(date),
      isValid: isValid,
      notificationCount: isValid ? props.notifications[dateString] || 0 : 0,
    });
  }

  // 添加当月的日期
  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i);

    // 检查日期是否有效
    const isValid = checkValidDate(year, month, i);
    const dateString = formatDate(date);

    days.push({
      day: i,
      date,
      currentMonth: true,
      isToday: isToday(date),
      isValid: isValid,
      notificationCount: isValid ? props.notifications[dateString] || 0 : 0,
    });
  }

  // 计算需要添加的下个月日期数量
  const totalDaysAdded = firstDayOfWeek + daysInMonth;
  const remainingDays =
    totalDaysAdded <= 35 ? 35 - totalDaysAdded : 42 - totalDaysAdded;

  // 添加下个月的日期，根据情况补满5行或6行
  for (let i = 1; i <= remainingDays; i++) {
    const date = new Date(year, month + 1, i);

    // 检查日期是否有效
    const isValid = checkValidDate(year, month + 1, i);
    const dateString = formatDate(date);

    days.push({
      day: i,
      date,
      currentMonth: false,
      isToday: isToday(date),
      isValid: isValid,
      notificationCount: isValid ? props.notifications[dateString] || 0 : 0,
    });
  }

  return days;
});

// 检查日期是否有效（例如2月没有31日）
const checkValidDate = (year, month, day) => {
  // 创建日期对象
  const date = new Date(year, month, day);
  // 检查日期是否有效（如果日期无效，月份或日期会被自动调整）
  return (
    date.getFullYear() === year &&
    date.getMonth() === month &&
    date.getDate() === day
  );
};

// 格式化日期为 YYYY-MM-DD
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

// 判断是否是今天
const isToday = (date) => {
  const today = new Date();
  return (
    date.getDate() === today.getDate() &&
    date.getMonth() === today.getMonth() &&
    date.getFullYear() === today.getFullYear()
  );
};

// 判断日期是否在当前日期之后
const isAfterToday = (date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 设置时分秒毫秒为0，只比较日期
  return date > today;
};

// 判断是否是选中的日期
const isSelectedDate = (date) => {
  if (!selectedDate.value) return false;
  return (
    date.getDate() === selectedDate.value.getDate() &&
    date.getMonth() === selectedDate.value.getMonth() &&
    date.getFullYear() === selectedDate.value.getFullYear()
  );
};

// 判断是否是最大通知日期
const maxNotificationDate = computed(() => {
  const currentYear = currentDate.value.getFullYear();
  const currentMonth = currentDate.value.getMonth();

  const monthNotifications = Object.entries(props.notifications).filter(
    ([dateStr, count]) => {
      if (count <= 0) return false;
      const date = new Date(dateStr);
      return (
        date.getFullYear() === currentYear && date.getMonth() === currentMonth
      );
    }
  );

  if (monthNotifications.length === 0) return null;

  const maxCount = Math.max(...monthNotifications.map(([, count]) => count));
  const maxNote = monthNotifications.find(([, count]) => count === maxCount);

  return maxNote ? maxNote[0] : null; // Returns date string 'YYYY-MM-DD'
});

const minNotificationDate = computed(() => {
  const currentYear = currentDate.value.getFullYear();
  const currentMonth = currentDate.value.getMonth();

  const monthNotifications = Object.entries(props.notifications).filter(
    ([dateStr, count]) => {
      if (count <= 0) return false;
      const date = new Date(dateStr);
      return (
        date.getFullYear() === currentYear && date.getMonth() === currentMonth
      );
    }
  );

  if (monthNotifications.length === 0) return null;

  const minCount = Math.min(...monthNotifications.map(([, count]) => count));
  const minNote = monthNotifications.find(([, count]) => count === minCount);

  return minNote ? minNote[0] : null; // Returns date string 'YYYY-MM-DD'
});

// 判断是否是最小通知日期
const isMinDate = (date) => {
  if (!minNotificationDate.value) return false;
  return formatDate(date) === minNotificationDate.value;
};

// 判断是否是最大通知日期
const isMaxDate = (date) => {
  if (!maxNotificationDate.value) return false;
  return formatDate(date) === maxNotificationDate.value;
};

// 上个月
const prevMonth = () => {
  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth();
  currentDate.value = new Date(year, month - 1, 1);
  emit("prevMonth", currentDate.value);
};

// 下个月
const nextMonth = () => {
  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth();
  currentDate.value = new Date(year, month + 1, 1);
  emit("nextMonth", currentDate.value);
};

// 返回当前月
const goToCurrentMonth = () => {
  currentDate.value = new Date();
  emit("goToCurrentMonth", currentDate.value);
};

// 选择日期
const selectDate = (day) => {
  selectedDate.value = new Date(day.date);
  emit("dateSelected", day.date);
};

// 初始化
onMounted(() => {
  // 可以在这里添加初始化逻辑
});
</script>

<style lang="scss" scoped>
.month-date-container {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 36rpx 0rpx 26rpx 0rpx;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 0 26rpx;
  padding-right: 0rpx;
}

.month-year {
  display: flex;
  align-items: center;
  flex: 1;
}

.month-year-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.month-controls {
  display: flex;
  margin-left: 20rpx;
  gap: 50rpx;
}

.control-arrow {
  width: 40rpx;
  height: 40rpx;
}

.this-month-btn {
  display: flex;
  align-items: center;
  position: relative;
  background: url("/static/message/calader/thismonth-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 200rpx;
  height: 50rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #975e2a;
}

.this-month-icon {
  width: 40rpx;
  height: 40rpx;
}

.this-month-text {
  margin-left: 54rpx;
}

.weekdays {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10rpx;
  font-size: 24rpx;
  color: #4e515e;
}

.weekday {
  flex: 1;
  text-align: center;
}

.weekday-text {
  font-size: 28rpx;
  color: #666;
}

.calendar-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 16rpx;
  border-bottom: 2rpx solid #eef0f3;
}

.calendar-day {
  width: 14.28%;
  // width: 82rpx;
  // margin: 0 7rpx;
  height: 106rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  position: relative;
  margin-bottom: 10rpx;
  padding-top: 18rpx;
}

.day-number {
  font-weight: 500;
  font-size: 28rpx;
  color: #262626;
  margin-bottom: 4rpx;
}

.notification-count {
  font-size: 28rpx;
  color: #387cf5;
}
.placeholder {
  visibility: hidden;
}

.current-month .day-number {
  font-weight: 500;
}

.today {
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  background: #286bfe;
}

.today .day-number {
  color: #fff !important;
}

.today .notification-count {
  color: #fff !important;
}

// .selected {
//   background-color: #4285F4;
//   border-radius: 8rpx;
// }

// .selected .day-number {
//   color: #fff;
//   font-weight: bold;
// }

// .selected .notification-count {
//   color: #fff;
// }

/* 当日期同时是今天和被选中时，优先显示选中样式 */
.today.selected {
  background-color: #4285f4;
}

/* 非当前月份日期样式 */
.other-month {
  // opacity: 0.6;
  // 禁止点击
  visibility: hidden;
}

.other-month .day-number {
  color: #999;
}

.other-month .notification-count {
  color: #aaa;
}

/* 无效日期样式 */
.invalid-date {
  opacity: 0.4 !important;
  background-color: #f5f5f5 !important;
  pointer-events: none;
}

.future-date {
  opacity: 0.3;
  pointer-events: none;
}

.invalid-date .day-number {
  color: #aaa !important;
  text-decoration: line-through;
}

.invalid-date .notification-count {
  // display: none !important;
}

.min-date .notification-count,
.min-date .day-number {
  color: #5bbfc9;
}
/* 最大/最小日期样式 */
.max-date {
  position: relative;
}

.max-date .notification-count,
.max-date .day-number {
  color: #ed722f;
}
.max-icon,
.min-icon {
  position: absolute;
  top: 0rpx;
  right: 0;
  // width: 24rpx;
  // height: 14rpx;
  width: 32rpx;
  height: 26rpx;
}
.max-text,
.min-text {
  font-weight: 400;
  font-size: 12rpx;
  color: #ffffff;
  text-align: center;
  position: absolute;
  top: 4rpx;
  right: 5rpx;
}

/* 底部图例和统计信息 */
.legend-container {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 20rpx;
  padding-bottom: 0rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0 20rpx;
}

.legend-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 6rpx;
}

.selected-dot {
  background-color: #387cf5;
}

.max-dot {
  background-color: #ed722f;
}

.min-dot {
  background-color: #5bbfc9;
}

.legend-text {
  font-size: 22rpx;
  color: #90949d;
}
</style>