<script setup lang="ts">
import './noticeListBox.less'
import noticeIcon from '../../../../assets/image/noticeIcon.png'
import { nextTick, onMounted, onUnmounted, 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'); // 动态动画时长
// 当前全部服务区的id
let serverpartId = ref<number[]>([])
// 播报数据
let noticeMessageObj = ref<any>()

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


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

// 改变页面显示状态
const emit = defineEmits<{
    (e: "handelGetNoticeListAllId", idList: number[], type: string, obj: any): void; // 切换页面分区
}>();

// 监听传入的选中服务区
watch(
    () => props.currentService,
    (newVal, oldVal) => {
        // 获取播报数据
        handleGetNoticeList()
    },
    { deep: true }
);
// 监听传入的选中服务区
watch(
    () => props.selectPageTab,
    (newVal, oldVal) => {
        // 获取播报数据
        handleGetNoticeList()
        // 获取播报数据
        startScrolling()
    },
    { 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"
    }

    let noticeListBox = sessionStorage.getItem('noticeListBox')
    let data: any = []
    if (noticeListBox) {
        data = JSON.parse(noticeListBox)
        console.log('11121');

    } else {
        data = await handleGetGDNearServiceList(req)
        sessionStorage.setItem("noticeListBox", JSON.stringify(data))
    }
    console.log('11121', data);
    // let list: any = data

    let list: any = [
        {
            NOTICEINFO_TITLE: "云南省蒙新高速蒙自服务区（下行）招商信息公告",
            SERVERPART_ID: 1187,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货
【周边资源及优势】地处昆河高速与蒙文砚高速交汇处，是连接昆明、文山、河口的重要交通枢纽，周边拥有碧色寨火车站、西南联大蒙自分校旧址等历史文化资源，以及南湖公园、长桥海国家级湿地公园等自然景观，同时依托蒙自石榴、枇杷等特色农产品，发展潜力巨大
【招商范围】综合楼（普通餐饮、地方特色小吃、便利店）、汽修
【面积】实际面积存在差异，具体以现场测量为准
综合楼285㎡、汽修225㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省景海高速景洪服务区（双侧）招商信息公告",
            SERVERPART_ID: 1176,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】位于西双版纳州景洪市，靠近中国-东盟自由贸易区的重要节点，是中老、中缅贸易的交通枢纽，进出口货物运输频繁，为服务区带来大量人流、物流和商机。周边有热带雨林、傣族村寨等独特风光，可感受东南亚风情。附近的告庄西双景、曼听公园等特色景点，展示了傣族文化和边境地区的发展成果
【招商范围】综合楼（地方特色餐饮、地方特色小吃、便利店）
【面积】实际面积存在差异，具体以现场测量为准
景洪服务区（上行）：综合楼1410㎡
景洪服务区（下行）：综合楼1410㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省景海高速勐海服务区（双侧）招商信息公告",
            SERVERPART_ID: 1177,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】位于西双版纳州勐海县，靠近打洛口岸，是中国与缅甸边境贸易的重要通道，进出口货物运输频繁，为服务区带来大量人流、物流和商机。周边有独特的边境风光，可感受中缅边境的异域风情。附近的勐景来景区、独树成林等特色景点，展示了傣族文化和边境地区的发展成果，吸引众多游客前来观光体验。
【招商范围】综合楼（普通餐饮、普通小吃、便利店）
【面积】实际面积存在差异，具体以现场测量为准
勐海服务区（上行）：综合楼50㎡
勐海服务区（下行）：综合楼1391㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省大南高速大仓服务区（双侧）招商信息公告",
            SERVERPART_ID: 971,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】位于大理州巍山县，地处大理至临沧高速沿线，是大理通往滇西南地区的重要交通节点，车流量大，区位优势明显。周边有巍山古城、巍宝山等历史文化景点，可感受南诏文化和彝族风情。附近的特色农产品和民族手工艺品资源丰富，为服务区带来商机，同时展示了当地民族文化和经济发展成果
【招商范围】综合楼（普通餐饮、普通小吃、便利店）
【面积】实际面积存在差异，具体以现场测量为准
大仓服务区（上行）：综合楼254㎡
大仓服务区（下行）：综合楼254㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省大南高速巍山服务区（双侧）招商信息公告",
            SERVERPART_ID: 973,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】位于大理州巍山县，地处大理至南涧高速沿线，地理位置优越，毗邻大理、丽江等旅游热点，交通便利，辐射滇西经济圈。周边自然资源丰富，民族文化独特，巍山古城为南诏文化发源地，具备深厚的历史底蕴与旅游吸引力。服务区可依托区域特色及高速路网优势，发展文旅、物流等产业，助力区域经济协同发展
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
【面积】实际面积存在差异，具体以现场测量为准
巍山服务区（上行）：综合楼979㎡
巍山服务区（下行）：综合楼1183㎡，汽修127㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省南景高速拥翠服务区（双侧）招商信息公告",
            SERVERPART_ID: 970,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】位于大理白族自治州南涧县，地处G5611大临高速沿线。周边生态环境优越，毗邻无量山国家级自然保护区，自然资源丰富，适宜发展生态旅游及康养产业。区域民族文化特色鲜明，彝族文化底蕴深厚，具备文旅融合潜力。服务区可依托高速交通优势，结合生态与人文资源，推动特色农产品、文化旅游及物流产业发展，促进区域经济多元化升级
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
【面积】实际面积存在差异，具体以现场测量为准
拥翠服务区（上行）：综合楼951㎡，汽修198㎡
拥翠服务区（下行）：综合楼951㎡，汽修198㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省南景高速三岔河服务区（双侧）招商信息公告",
            SERVERPART_ID: 1109,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】地处滇西南交通枢纽。周边自然资源丰富，毗邻无量山、哀牢山国家级自然保护区，生态环境优越。景东县为普洱茶核心产区之一，茶文化底蕴深厚，具备特色农业及文旅开发潜力。服务区可依托高速交通优势及区域资源，发展生态旅游、茶产业及物流服务，助力区域经济可持续发展
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
【面积】实际面积存在差异，具体以现场测量为准。
三岔河服务区（上行）：综合楼828㎡，汽修198㎡
三岔河服务区（下行）：综合楼828㎡，汽修198㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省南景高速景东北停车区（双侧）招商信息公告",
            SERVERPART_ID: 1110,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】位于普洱市景东彝族自治县，地处G5611大临高速沿线。周边自然资源丰富，毗邻无量山、哀牢山国家级自然保护区，生态环境优越，生物多样性显著。景东县为普洱茶主产区之一，茶文化底蕴深厚，具备特色农业开发潜力。停车区可依托高速交通优势及生态资源，发展生态旅游、茶产业及物流服务，助力区域经济可持续发展
【招商范围】综合楼（普通餐饮、普通小吃、便利店）
【面积】实际面积存在差异，具体以现场测量为准
景东北服务区（上行）：综合楼846㎡
景东北服务区（下行）：综合楼846㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省思澜高速龙潭服务区（双侧）招商信息公告",
            SERVERPART_ID: 1161,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】思澜高速全长约131.5公里，设计时速80公里，双向四车道。茫茫龙潭大山植被丰富，有热带雨林植物花卉。服务区按花园式景区建设，有傣族、拉祜族、佤族建筑样式等。能为过往驾乘人员提供舒适的休憩环境。
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
【面积】实际面积存在差异，具体以现场测量为准
龙潭服务区（上行）：综合楼1499㎡、汽修210㎡
龙潭服务区（下行）：综合楼1597㎡、汽修210㎡`
        },
        {
            NOTICEINFO_TITLE: "云南省思澜高速糯扎渡服务区（双侧）招商信息公告",
            SERVERPART_ID: 1163,
            NOTICEINFO_CONTENT: `【合作模式】保底收益或提点取高
【运营方式】餐饮、小吃加盟“滇食坊”品牌，商超加盟“彩云驿购”品牌 ，供应链统一供货 
【周边资源及优势】思澜高速全长约131.5公里，设计时速80公里，双向四车道，位于昆磨高速等重要交通干道上，是连接昆明、普洱、西双版纳等城市的关键节点，车流量大，客源稳定
【招商范围】综合楼（普通餐饮、普通小吃、便利店）、汽修
【面积】实际面积存在差异，具体以现场测量为准
糯扎渡服务区（上行）：综合楼2735㎡、汽修167㎡
糯扎渡服务区（下行）：综合楼2010㎡、汽修167㎡`
        }
    ]


    let allServerpartId: number[] = []
    let obj: any = {}

    noticeList.length = 0;
    list && list.forEach((item: any) => {
        noticeList.push(item)
        allServerpartId.push(item.SERVERPART_ID)
        obj[Number(item.SERVERPART_ID)] = item.NOTICEINFO_CONTENT
    });
    serverpartId.value = allServerpartId
    console.log('noticeList:', noticeList); // 添加这行


    noticeMessageObj.value = obj
    nextTick(() => {
        // 数据加载完成后启动滚动
        startScrolling();
    })
}

// 开始滚动的方法
const startScrolling = () => {
    isScrolling.value = false;
    nextTick(() => {
        const listEl = document.querySelector(`.noticeList${props.selectPageTab}`) 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
    // }
}

// 点击了这个
const handleClickBigBox = () => {
    console.log('serverpartId.valueserverpartId.valueserverpartId.value', serverpartId.value);
    emit('handelGetNoticeListAllId', serverpartId.value, 'notice', noticeMessageObj.value)
}

onUnmounted(() => {
    // // 清理定时器等资源
    // if (scrollTimer) {
    //     clearInterval(scrollTimer)
    // }
    // 停止滚动
    stopScrolling();

    // 清除动态添加的样式标签
    const styleEl = document.getElementById('dynamic-scroll-keyframes');
    if (styleEl) {
        styleEl.remove();
    }
})
</script>


<template>
    <!-- 横向滚动 -->
    <div class="noticeListBigBox" @click="handleClickBigBox">
        <img class="noticeIcon" :src="noticeIcon" />
        <div class="noticeListBox">
            <div :class="['noticeList', `noticeList${props.selectPageTab}`, { '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>