<template>
    <!-- info / 无 category 的公告：滚动栏显示 title -->
    <div v-if="infoNotices.length > 0" :class="['notice-bar', 'notice-bar--info']">
        <!-- 图标 -->
        <span class="material-icons-round notice-bar__icon">campaign</span>

        <!-- 滚动内容区域 -->
        <div class="notice-bar__content" ref="wrapRef">
            <div class="notice-bar__text" ref="textRef" :style="animationStyle">
                {{ currentNotice.title }}
            </div>
        </div>

        <!-- 多条公告时显示计数 -->
        <span v-if="infoNotices.length > 1" class="notice-bar__count">
            {{ currentIndex + 1 }}/{{ infoNotices.length }}
        </span>

        <!-- 关闭按钮 -->
        <button v-if="closable" class="notice-bar__close" @click="handleClose" :title="t('notice.close')">
            <span class="material-icons-round text-base">close</span>
        </button>
    </div>

    <!-- danger / warning 的公告：弹窗逐条显示 title + content -->
    <el-dialog v-model="dialogVisible" :title="currentAlert?.title" width="480px" align-center>
        <div class="alert-notice__content" v-html="currentAlert?.content"></div>
        <template #footer>
            <el-button v-if="alertIndex < alertNotices.length - 1" @click="nextAlert">
                下一条 ({{ alertIndex + 1 }}/{{ alertNotices.length }})
            </el-button>
            <el-button type="primary" @click="closeAlert">
                {{ alertIndex < alertNotices.length - 1 ? '全部关闭' : '我知道了' }} </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { useNoticeStore } from '@/stores/noticeStore'

const props = defineProps({
    speed: { type: Number, default: 50 }, // 滚动速度 px/s
    closable: { type: Boolean, default: true },
})

const { t } = useI18n()
const noticeStore = useNoticeStore()

// ========== info 滚动栏 ==========
const infoNotices = computed(() => noticeStore.infoNotices)

// 当前显示的公告索引（多条轮播）
const currentIndex = ref(0)
const currentNotice = computed(() => infoNotices.value[currentIndex.value] || {})

// 滚动动画
const wrapRef = ref(null)
const textRef = ref(null)
const animationDuration = ref(10)
const needScroll = ref(false)

const animationStyle = computed(() => {
    if (!needScroll.value) return {}
    return {
        animationDuration: `${animationDuration.value}s`,
    }
})

// 计算文本是否需要滚动
const calculateScroll = async () => {
    await nextTick()
    if (!wrapRef.value || !textRef.value) return

    const wrapWidth = wrapRef.value.offsetWidth
    const textWidth = textRef.value.scrollWidth

    if (textWidth > wrapWidth) {
        needScroll.value = true
        // 基于文本宽度和速度计算持续时间
        animationDuration.value = (textWidth + wrapWidth) / props.speed
    } else {
        needScroll.value = false
    }
}

// 多条公告自动轮播
let rotateTimer = null

const startRotate = () => {
    stopRotate()
    if (infoNotices.value.length <= 1) return

    rotateTimer = setInterval(() => {
        currentIndex.value = (currentIndex.value + 1) % infoNotices.value.length
    }, 8000) // 每 8 秒切换
}

const stopRotate = () => {
    if (rotateTimer) {
        clearInterval(rotateTimer)
        rotateTimer = null
    }
}

// 关闭当前公告
const handleClose = () => {
    const notice = currentNotice.value
    if (notice && notice.id) {
        noticeStore.dismissNotice(notice.id)
        // 调整索引
        if (currentIndex.value >= infoNotices.value.length) {
            currentIndex.value = 0
        }
    }
}

// 监听公告变化重新计算
watch(currentNotice, () => {
    needScroll.value = false
    calculateScroll()
}, { flush: 'post' })

watch(() => infoNotices.value.length, (len) => {
    if (len > 1) {
        startRotate()
    } else {
        stopRotate()
    }
})

// ========== danger / warning 弹窗 ==========
const alertNotices = computed(() => noticeStore.alertNotices)
const dialogVisible = ref(false)
const alertIndex = ref(0)

const currentAlert = computed(() => alertNotices.value[alertIndex.value] || null)

// 下一条弹窗公告
const nextAlert = () => {
    // 关闭当前这条
    if (currentAlert.value) {
        noticeStore.dismissNotice(currentAlert.value.id)
    }
    alertIndex.value++
    if (alertIndex.value >= alertNotices.value.length) {
        dialogVisible.value = false
    }
}

// 关闭全部弹窗公告
const closeAlert = () => {
    alertNotices.value.forEach(n => noticeStore.dismissNotice(n.id))
    dialogVisible.value = false
}

// 有弹窗类公告时自动弹出
watch(alertNotices, (list) => {
    if (list.length > 0 && !dialogVisible.value) {
        alertIndex.value = 0
        dialogVisible.value = true
    }
}, { immediate: true })

// ========== 生命周期 ==========
onMounted(() => {
    calculateScroll()
    if (infoNotices.value.length > 1) {
        startRotate()
    }
})

onUnmounted(() => {
    stopRotate()
})
</script>

<style scoped>
.notice-bar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    font-size: 15px;
    line-height: 44px;
    flex-shrink: 0;
}

/* 类型样式 */
.notice-bar--info {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #eff6ff;
    color: #1e40af;
}

.notice-bar--info .notice-bar__icon {
    color: #3b82f6;
}

/* 图标 */
.notice-bar__icon {
    font-size: 22px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* 内容区域 */
.notice-bar__content {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.notice-bar__text {
    display: inline-block;
    white-space: nowrap;
}

/* 需要滚动时添加动画类 */
.notice-bar__content .notice-bar__text {
    animation: none;
}

.notice-bar__text[style*="animationDuration"] {
    animation-name: noticeScroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    padding-left: 100%;
}

@keyframes noticeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 计数 */
.notice-bar__count {
    font-size: 13px;
    opacity: 0.7;
    margin-left: 10px;
    flex-shrink: 0;
}

/* 关闭按钮 */
.notice-bar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    border-radius: 4px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.notice-bar__close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.06);
}

/* 弹窗公告内容（v-html 渲染，需要用 :deep 穿透 scoped） */
.alert-notice__content {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}

.alert-notice__content :deep(p) {
    margin: 0 0 8px;
}

.alert-notice__content :deep(p:last-child) {
    margin-bottom: 0;
}
</style>
