<template>
    <view class="calendar-main">
        <view class="month-view">
            <wd-icon name="arrow-left" size="40rpx" @click="preMonth"></wd-icon>
            <view class="month-text">{{ monthFirstDay.format('YYYY年MM月') }}</view>
            <wd-icon name="arrow-right" size="40rpx" @click="nextMonth"></wd-icon>
        </view>
        <view class="days-view">
            <view class="days-view-weeks">
                <view v-for="week in weeks" :key="week">{{ week }}</view>
            </view>
            <view class="days-view-day">
                <view v-for="(weekDays, index) in dayArray" :key="index" class="week-day">
                    <view
                        v-for="day in weekDays"
                        :key="day"
                        :class="[
                            'day-item',
                            {
                                'not-current': !day.isCurrentMonth,
                                'is-active': value === day.date,
                                'current-day': day.date === dayjs().format('YYYY-MM-DD'),
                            },
                        ]"
                        @click="chooseDay(day)"
                    >
                        <view class="day-text">{{ day.day }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import dayjs from 'dayjs';
import { type CalendarDay, generateMonthCalendar } from '@/utils/calendar';

defineProps({
    value: {
        type: String,
        default: dayjs().format('YYYY-MM-DD'),
    },
});

const _emit = defineEmits(['update:value']);

const monthFirstDay = ref(dayjs().startOf('month'));

const weeks = ['一', '二', '三', '四', '五', '六', '日'];

const dayArray = computed(() => {
    return generateMonthCalendar(monthFirstDay.value.toDate());
});

const chooseDay = (_day: CalendarDay) => {
    _emit('update:value', _day.date);
};

const preMonth = () => {
    monthFirstDay.value = monthFirstDay.value.subtract(1, 'month');
};

const nextMonth = () => {
    monthFirstDay.value = monthFirstDay.value.add(1, 'month');
};
</script>

<style scoped lang="scss">
.calendar-main {
}

.month-view {
    font-size: 30rpx;
    color: #666666;
    text-align: center;
    padding: 30rpx 0;
    display: flex;
    place-content: center;
    align-items: center;

    .month-text {
        padding: 0 20rpx;
    }
}

.days-view {
    padding: 0 20rpx;
    box-sizing: border-box;

    &-weeks {
        display: flex;
        border-bottom: 2rpx solid #cccccc;
        color: #999999;
        padding: 20rpx 0;

        & > view {
            width: 100%;
            text-align: center;
        }
    }

    &-day {
        .week-day {
            display: flex;
            //border-bottom: 2rpx solid #cccccc;
            color: #999999;
            padding: 20rpx 0;

            & > .day-item {
                width: 100%;
                text-align: center;
                color: #000000;

                box-sizing: border-box;

                &.not-current {
                    color: #cccccc;
                }

                &.is-active {
                    & > .day-text {
                        border: 4rpx solid #615dff;
                    }
                }

                &.current-day {
                    &.is-active {
                        & > .day-text {
                            background-color: #615dff;
                            color: #ffffff !important;
                        }
                    }

                    & > .day-text {
                        color: #615dff;
                    }
                }

                & > .day-text {
                    font-size: 26rpx;
                    width: 60rpx;
                    height: 60rpx;
                    display: grid;
                    place-content: center;
                    border-radius: 60rpx;
                    font-weight: 550;
                    border: 4rpx solid white;
                }
            }
        }
    }
}
</style>
