<template>
    <AppLayout title="选择日期" :use-scroll-view="false" back-gorund-color="#FAFAFA">
        <template #headerleft>
            <view class="btn">
                <image src="@/static/icon/back.png" @click="navBack"></image>
            </view>
        </template>
        <template #headerright>
            <view class="btn mar_ri10 button-click" @click="backParams">确认</view>
        </template>
        <view class="content">
            <view class="top-date">
                <view
                    class="weekText"
                    :class="{ color_256BFA: item === '日' || item === '六' }"
                    v-for="(item, index) in weekMap"
                    :key="index"
                >
                    {{ item }}
                </view>
            </view>
            <scroll-view scroll-y class="main-scroll" @scrolltolower="onScrollBottom">
                <view class="date-list" v-for="(vItem, vIndex) in calendarData" :key="vIndex">
                    <view class="list-title">{{ vItem.title }}</view>
                    <view class="list-item">
                        <view
                            class="item button-click"
                            :class="{
                                noOptional: !item.isThisMonth,
                                active: current.date === item.date && item.isThisMonth,
                            }"
                            v-for="(item, index) in vItem.list"
                            :key="index"
                            @click="selectDay(item)"
                        >
                            <view class="item-top">{{ item.day }}</view>
                            <view class="item-nong">{{ item.nl }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </AppLayout>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack, LunarUtil } = inject('globalFunction');
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
const calendarData = ref([]);
const current = ref({});

const isRecord = ref(false);
const recordNum = ref(4);
const pages = reactive({
    year: 0,
    month: 0,
});

onLoad((options) => {
    if (options.date) {
        current.value = {
            date: options?.date || null,
        };
    }
    if (options.record) {
        isRecord.value = true;
        initOldPagesDate();
        new Array(recordNum.value + 1).fill(null).map(() => {
            addMonth();
        });
    } else {
        initPagesDate();
        new Array(recordNum.value).fill(null).map(() => {
            addMonth();
        });
    }
});

function backParams() {
    if (isValidDateString(current.value.date)) {
        navBack({
            data: current.value,
        });
    } else {
        $api.msg('请选择日期');
    }
}

function isValidDateString(dateStr) {
    const regex = /^\d{4}-\d{2}-\d{2}$/;
    if (!regex.test(dateStr)) return false;

    const date = new Date(dateStr);
    if (isNaN(date.getTime())) return false;

    // 检查日期部分是否一致（防止 "2020-02-31" 这种被 Date 自动修正）
    const [year, month, day] = dateStr.split('-').map(Number);
    return date.getFullYear() === year && date.getMonth() + 1 === month && date.getDate() === day;
}

function onScrollBottom() {
    if (isRecord.value) return;
    addMonth();
}

function selectDay(item) {
    current.value = item;
}

function initOldPagesDate() {
    const d = new Date();
    const yue = d.getMonth();
    if (yue < recordNum.value) {
        pages.month = 12 + (yue - recordNum.value);
        pages.year = d.getFullYear() - 1;
    } else {
        pages.month = yue - recordNum.value;
        pages.year = d.getFullYear();
    }
}

function initPagesDate() {
    const d = new Date();
    pages.month = d.getMonth();
    pages.year = d.getFullYear();
}

function addMonth() {
    if (pages.month >= 12) {
        pages.year += 1;
        pages.month = 1;
    } else {
        pages.month += 1;
    }
    const month = getMonthCalendarData(pages);
    calendarData.value.push(month);
}
/**
 *
 * @param {Array<string>} selectedDates - 选中的日期数组 ['2025-04-21', ...]
 * @returns {Array<Object>} 六个月日历数据
 */
function getMonthCalendarData({ year, month, selectableDates = [] }) {
    const todayStr = new Date().toISOString().split('T')[0];
    const isSelected = (y, m, d) =>
        selectableDates.includes(`${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`);

    const list = [];

    const firstDay = new Date(year, month - 1, 1);
    const firstWeekday = firstDay.getDay(); // 0 是周日
    const lastDate = new Date(year, month, 0).getDate();

    // 补全前一月天数（上月最后几天）
    if (firstWeekday !== 0) {
        const prevLastDate = new Date(year, month - 1, 0).getDate();
        for (let i = firstWeekday - 1; i >= 0; i--) {
            const d = prevLastDate - i;
            const prevMonth = month - 1 <= 0 ? 12 : month - 1;
            const prevYear = month - 1 <= 0 ? year - 1 : year;
            const nl = LunarUtil.getLunarDayInChinese(prevYear, prevMonth, d);
            const dateStr = `${prevYear}-${String(prevMonth).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
            list.push({
                day: d,
                nl: nl,
                isThisMonth: false,
                isToday: dateStr === todayStr,
                isSelectable: isSelected(prevYear, prevMonth, d),
                week: weekMap[new Date(prevYear, prevMonth - 1, d).getDay()],
                date: dateStr,
            });
        }
    }

    // 当前月天数
    for (let d = 1; d <= lastDate; d++) {
        const nl = LunarUtil.getLunarDayInChinese(year, month, d);
        const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
        list.push({
            day: d,
            nl: nl,
            isThisMonth: true,
            isToday: dateStr === todayStr,
            isSelectable: isSelected(year, month, d),
            week: weekMap[new Date(year, month - 1, d).getDay()],
            date: dateStr,
        });
    }

    // 补全下个月天数（让最后一行完整 7 个）
    const remaining = 7 - (list.length % 7);
    if (remaining < 7) {
        for (let d = 1; d <= remaining; d++) {
            const nextMonth = month + 1 > 12 ? 1 : month + 1;
            const nextYear = month + 1 > 12 ? year + 1 : year;
            const nl = LunarUtil.getLunarDayInChinese(nextYear, nextMonth, d);
            const dateStr = `${nextYear}-${String(nextMonth).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
            list.push({
                day: d,
                nl: nl,
                isThisMonth: false,
                isToday: dateStr === todayStr,
                isSelectable: isSelected(nextYear, nextMonth, d),
                week: weekMap[new Date(nextYear, nextMonth - 1, d).getDay()],
                date: dateStr,
            });
        }
    }

    return {
        title: `${year}年${month}月`,
        list,
    };
}
</script>

<style lang="stylus" scoped>
.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap
    width: 60rpx;
    height: 60rpx;
    image {
        height: 100%;
        width: 100%;
    }
}
.content{
    height: 100%
    display: flex
    flex-direction: column
    border-radius: 40rpx 40rpx 0 0
    background: #FFFFFF;
    overflow: hidden
    margin-top: 20rpx
    .top-date{
        display: flex
        justify-content: space-between
        padding: 28rpx
        .weekText{
            text-align: center
            width: 99rpx;
        }

    }
    .main-scroll{
        flex: 1
        overflow: hidden
    }
    .date-list{
        .list-title{
            height: 84rpx;
            line-height: 84rpx
            background: #FAFAFA;
            font-weight: 600;
            font-size: 32rpx;
            color: #1A1A1A;
            padding: 0 28rpx;
            box-sizing: border-box
        }
        .list-item{
            padding: 16rpx 28rpx 20rpx 28rpx;
            display: grid
            grid-template-columns: repeat(7, 1fr)
            grid-gap: 0rpx
            .item{
                display: flex
                flex-direction: column
                align-items: center
                justify-content: center
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                padding: 16rpx 0
                margin-bottom: 20rpx
                .item-top{
                    font-weight: 600;
                    font-size: 32rpx;
                }
                .item-nong{
                    font-size: 16rpx;
                    color: #666666
                    margin-top: 2rpx
                }
            }
            .optional{
                // height: 96rpx;
                border: 2rpx solid #92B5FC;
            }
            .noOptional{
                color: #B8B8B8;
            }
            .active{
                background: linear-gradient( 225deg, #9E74FD 0%, #256BFA 100%);
                color: #FFFFFF
                .item-nong{
                    font-size: 16rpx;
                    color: #FFFFFF
                    margin-top: 2rpx
                }
            }
        }
    }
}
</style>
