<script setup lang="ts">
import { handleGetGDNearServiceList } from '../../service';
import CenterTitle from '../CenterTitle/CenterTitle.vue';
import './AnnouncementTopic.less'
import { onMounted, onBeforeUnmount, reactive, ref } from 'vue';



// 消息播报列表
let noticeList = reactive<any>([]);
// 当前滚动到的消息索引
let currentIndex = ref<number>(0)
// 滚动的计时器
let scrollInterval = ref<any>(null)

onMounted(async () => {
    // 拿到数据
    await handleGetData()

})

// 拿到数据
const handleGetData = async () => {
    const req = {
        SearchParameter: {
            PROVINCE_CODE: "530000",
            NOTICEINFO_STATE: 1,
            NOTICEINFO_TYPES: 2000
        },
        PageIndex: 1,
        PageSize: 10,
        appId: "wxee018fb96955552a"
    }
    const data = await handleGetGDNearServiceList(req)
    let list: any = data
    noticeList.length = 0;
    list && list.forEach((item: any) => noticeList.push(item));
    if (list && list.length > 0) {
        startScrolling()
    }
}

// 开始滚动的方法
const startScrolling = () => {
    stopScrolling();
    if (noticeList.length <= 1) return;
    const duration = 3000;
    scrollInterval.value = setInterval(() => {
        currentIndex.value++;
        if (currentIndex.value >= noticeList.length) {
            setTimeout(() => {
                const container = document.querySelector('.noticeContainer') as HTMLElement;
                if (container) container.style.transition = 'none';
                currentIndex.value = 0;
                setTimeout(() => {
                    if (container) container.style.transition = '';
                }, 50);
            }, 500);
        }
    }, duration);
}

// 停止滚动的方法
const stopScrolling = () => {
    if (scrollInterval.value) {
        clearInterval(scrollInterval.value)
        scrollInterval.value = null
    }
}
</script>




<template>
    <div class="AnnouncementTopicBox">
        <CenterTitle :pageTitle="'公告主题'" />
        <div class="AnnouncementTopicContent">
            <div class="noticeListBox">
                <div :class="noticeList.length > 1 ? 'noticeList scrolling' : 'noticeList'">
                    <template v-if="noticeList.length > 1">
                        <div class="noticeItem" v-for="(item, index) in noticeList.concat(noticeList)" :key="index">
                            <!-- <div class="icon"></div> -->
                            <div class="contentMessage">
                                {{ item.NOTICEINFO_TITLE || '-' }}
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="noticeItem" v-for="(item, index) in noticeList" :key="index">
                            <!-- <div class="icon"></div> -->
                            <div class="contentMessage">
                                {{ item.NOTICEINFO_TITLE || '-' }}
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>