<template>
    <router-view />
    <van-popup v-model:show="showPopup" round @click-overlay="onClickOverlay">
        <div class="popup-content text-center p-8">
            <div v-html="currentNotify?.content"></div>
            <div class="flex justify-center">
                <van-button type="primary" @click="showPopup = false" class="w-24">关闭</van-button>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

// 响应式变量
const showPopup = ref(false)
const notify = ref([])
const currentNotify = ref(null)

// 获取当前页面路径
const route = useRoute()

// 获取通知数据
onMounted(() => {
    getGlobalNotify()
})

// 获取通知数据
const getGlobalNotify = async () => {
    const { data, error } = await useApiFetch("/notification/list")
        .get()
        .json()

    if (data.value && !error.value) {
        if (data.value !== 200) {
            notify.value = data.value.data.notifications
            checkNotification() // 在获取数据后检查通知
        }
    }
}

// 判断当前时间是否在通知的时间范围内
const isWithinTimeRange = (startTime, endTime) => {
    const now = new Date()

    // 获取当前时间的小时和分钟
    const currentMinutes = now.getHours() * 60 + now.getMinutes()

    // 将 startTime 和 endTime 转换为分钟数
    const startParts = startTime.split(':').map(Number)
    const endParts = endTime.split(':').map(Number)
    const startMinutes = startParts[0] * 60 + startParts[1]
    const endMinutes = endParts[0] * 60 + endParts[1]

    // 如果 endTime 小于 startTime，表示跨越了午夜
    if (endMinutes < startMinutes) {
        // 判断当前时间是否在 [startTime, 23:59:59] 或 [00:00:00, endTime] 之间
        return currentMinutes >= startMinutes || currentMinutes < endMinutes
    }

    // 普通情况，直接判断时间是否在范围内
    return currentMinutes >= startMinutes && currentMinutes <= endMinutes
}
// 检查通知并更新showPopup
const checkNotification = () => {
    // 遍历通知数组，找到第一个符合条件的通知
    for (let notification of notify.value) {
        // 判断时间是否符合当前时间
        const isTimeValid = isWithinTimeRange(notification.startTime, notification.endTime)
        // 判断页面是否符合

        if (isTimeValid && notification.notificationPage === route.path) {
            currentNotify.value = notification
            showPopup.value = true
            break // 只显示第一个符合的通知
        }
    }
}

// 监听路由变化
watch(() => route.path, () => {
    checkNotification() // 每次路由变化时重新判断通知
})

// 关闭弹窗
const onClickOverlay = () => {
    showPopup.value = false
}
</script>

<style lang="scss" scoped></style>
