<script>
let id = 0
// 获取今日的日期信息
const date = new Date()
const year = date.getFullYear()
// 这个月几月 0 - 11
const month = date.getMonth() + 1
// 今天是第几天
const nowDay = date.getDate()
// 星期几
const week = date.getDay()
// 今天的日期
const nowDate = `${year}年${month}月${nowDay}日`
const daysInMonth = new Date(year, month, 0).getDate()

export default {
    data() {
        return {
            nowDate,
            calendarElement: "calendar-element",
            calendar: "calendar",
            calendarCurrentDate: "calendar-current-date",
            calendarWeek: "calendar-week",
            calendarWeekDay: "calendar-week-day",
            calendarAllDay: "calendar-all-day",
            calendarDay: "calendar-day",
            calendarDayRow: "calendar-day-row",
            weeks: [
                { id: id++, text: "Sun" },
                { id: id++, text: "Mon" },
                { id: id++, text: "Tue" },
                { id: id++, text: "Wed" },
                { id: id++, text: "Thu" },
                { id: id++, text: "Fri" },
                { id: id++, text: "Sat" },
            ],
            daysInMonth,
        }
    }
}
</script>

<template>
    <div :class="calendarElement">
        <div :class="calendar">
            <div :class="calendarCurrentDate">{{ nowDate }}</div>
            <div :class="calendarWeek">
                <div v-for="week in weeks" :class="calendarWeekDay" :key="week.id">{{ week.text }}</div>
            </div>
            <div :class="calendarAllDay">
                <div v-for="day in daysInMonth" :class="calendarDay">
                    <div :class="calendarDayRow">{{ day }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.calendar {
    width: 280px;
    margin: 10px auto;
}

.calendar-week,
.calendar-all-day {
    display: flex;
    flex-wrap: wrap;
}

.calendar-week {
    border-bottom: 1px solid saddlebrown;
}

.calendar-current-date,
.calendar-week-day,
.calendar-all-day {
    text-align: center;
}


.calendar-week-day {
    height: 48px;
    line-height: 48px;
    width: calc(100%/7);
}

.calendar-day {
    width: calc(100%/7);
}
</style>
