<script setup lang="ts">
import './noticeListBox.less'
import noticeIcon from '../../../../assets/image/noticeIcon.png'
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import { handleGetGDNearServiceList } from '../../service'


// 消息播报列表
let noticeList = reactive<any>([]);
// 当前滚动到的消息索引
let currentIndex = ref<number>(0)
// 滚动的计时器
let scrollInterval = ref<any>(null)
let isScrolling = ref<boolean>(false);
let scrollDuration = ref('10s'); // 动态动画时长

onMounted(async () => {
    // 获取播报数据
    handleGetNoticeList()
})


// 传入的数据
const props = defineProps<{
    currentService?: any;
}>();

// 监听传入的选中服务区
watch(
    () => props.currentService,
    (newVal, oldVal) => {

        // 获取播报数据
        handleGetNoticeList()
    },
    { deep: true }
);


// 获取播报数据
const handleGetNoticeList = async () => {
    const req = {
        SearchParameter: {
            PROVINCE_CODE: "530000",
            NOTICEINFO_STATE: 1,
            SERVERPART_IDS: props.currentService?.SERVERPART_ID || ""
        },
        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));
    console.log('noticeList:', noticeList); // 添加这行
    nextTick(() => {
        // 数据加载完成后启动滚动
        startScrolling();
    })
}

// 开始滚动的方法
const startScrolling = () => {
    isScrolling.value = false;
    nextTick(() => {
        const listEl = document.querySelector('.noticeList') as HTMLElement;
        if (listEl) {
            const originWidth = listEl.scrollWidth / 2;
            const speed = 100; // px/s
            const duration = originWidth / speed;
            scrollDuration.value = duration + 's';

            // 动态插入 keyframes
            const styleId = 'dynamic-scroll-keyframes';
            let styleEl = document.getElementById(styleId) as HTMLStyleElement;
            if (!styleEl) {
                styleEl = document.createElement('style');
                styleEl.id = styleId;
                document.head.appendChild(styleEl);
            }
            styleEl.innerHTML = `
            @keyframes scrollNotice {
                0% { transform: translateX(0); }
                100% { transform: translateX(-${originWidth}px); }
            }`;
            isScrolling.value = true;
        }
    });


    // 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 = () => {
    isScrolling.value = false;
    if (scrollInterval.value) {
        clearInterval(scrollInterval.value)
        scrollInterval.value = null
    }
    // if (scrollInterval.value) {
    //     clearInterval(scrollInterval.value)
    //     scrollInterval.value = null
    // }
}

</script>


<template>
    <!-- 横向滚动 -->
    <div class="noticeListBigBox">
        <img class="noticeIcon" :src="noticeIcon" />
        <div class="noticeListBox">
            <div :class="['noticeList', { 'scrolling': isScrolling }]" :style="{ '--scroll-duration': scrollDuration }">
                <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>
            </div>
        </div>
    </div>

    <!-- 纵向滚动 -->
    <!-- <div class="noticeListBigBox">
        <img class="noticeIcon" :src="noticeIcon" />
        <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> -->
</template>