<template>
    <div class="container">
        <div class="center-width">
            <div class="left-title">
                <div class="serve-title">
                    <div class="index">03</div>
                    <div class="name">新闻资讯</div>
                    <div class="english">NEWS INFORMMATION</div>
                </div>
            </div>
            <div class="content product">
                <div class="left ">
                    记录创新足迹，传递科技温度。
                    从重大突破到温暖日常，
                    从行业前沿到团队风采，
                    与您共见成长，共赴未来。
                </div>
                <div class="new-index" ref="scrollRef" @mouseenter="stopScroll" @mouseleave="startScroll">
                    <div v-for="item in data" :key="item.comm_msg_info.id" class="news-item">
                        <div class="news-content">
                            <h3 class="news-title">{{ item.app_msg_ext_info.title }}</h3>
                            <p class="news-digest" v-if="item.app_msg_ext_info.digest">{{ item.app_msg_ext_info.digest
                            }}
                            </p>
                            <div class="news-meta">
                                <span class="news-author" v-if="item.app_msg_ext_info.author">{{
                                    item.app_msg_ext_info.author
                                }}</span>
                                <span class="news-date">{{ formatDate(item.comm_msg_info.datetime) }}</span>
                            </div>
                        </div>
                        <div class="news-cover" v-if="item.app_msg_ext_info.cover">
                            <img :src="getLocalCover(item)" :alt="item.app_msg_ext_info.title"
                                @error="e => { const target = e.target as HTMLImageElement; if (target) target.src = item.app_msg_ext_info.cover }">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const data = ref([
    {
        "comm_msg_info": {
            "id": 1000000023,
            "type": 49,
            "datetime": 1738720097,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "开工大吉！",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484575&amp;idx=1&amp;sn=841085af0a0366b2a684ebfb99eda98d&amp;chksm=e8101b8903cd1b630e4e4ac97f0985b38297d0a3d11b57011f80ab63a1b9a1cc02d280eaca6d&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gMl92hlSMLOcD3ibmc0hcboP15uxv9ajib9LhVozEdmia4ayiaFuCmrPasjlAeekPDzTw0nib4uNg2ibGpA/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 8,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000019,
            "type": 49,
            "datetime": 1735682400,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "岁序更替 步履不停丨英泽科技祝您新年快乐！",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484477&amp;idx=1&amp;sn=2795a99bbcd8d804bd2df77a19c04421&amp;chksm=e84697531b52b9ff85073315652c8f2765a0a6ec83dd1813c6b56de0d41d05a8ef62fe6a1110&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadAa1zwuhUsibkaiaCaPyKe5ibgk7bBacicUmEL8ibibSNSa7LVCuzDRsibgfSTQ/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 8,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000022,
            "type": 49,
            "datetime": 1735650000,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": '" 滚 " 动元旦，乐启新程',
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484526&amp;idx=1&amp;sn=c938faed3d5631e8d5d4e3d16c63c5c6&amp;chksm=e8c7a8db03152c7d1b9d792a30eec0a6a0c336482e4bec7e7c11050944bdada33035bc0b8d16&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadAtXOP96mHWAX2ENg4LoRRbN27o2KEV90mE1ryMYgGicrubtfX1XTiaHOg/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "英泽家园",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 0,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000021,
            "type": 49,
            "datetime": 1735644129,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "第四季度员工生日会 | 年年欢愉，岁岁胜意",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484511&amp;idx=1&amp;sn=b343a9a9ec643f9a27bf251fc3b678ca&amp;chksm=e86ae31043ae52b80bd7b05b286cd35702e6e76e0618ee127714c5ff9a3c1950b0f643448d87&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadASXW5GvcFnVYBRErgE6VZX6oR0WicUnFB75fUmtOLdYwuibcaTvX00HQQ/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "英泽家园",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 0,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000020,
            "type": 49,
            "datetime": 1735641319,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "英泽科技举行总经理聘任仪式",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484493&amp;idx=1&amp;sn=4768a638eeef1154a6c07594bea6c79f&amp;chksm=e83d36ed9ed75f8e77cc0cad1b694b77df184d28d6bfbf13ba1106a8182c19c0dc09901a394c&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNLdbDt0mGYjqFvOKyM0iadA5iaUwJJKq8nIlPIQCicjg4ceaV2ovn9E1DJIYcrrkbXg6Y63jUJhmDMw/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "英泽家园",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 0,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000018,
            "type": 49,
            "datetime": 1734086492,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "十二载砥砺前行，新周期再攀高峰丨热烈庆祝英泽科技成立十二周年！",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484441&amp;idx=1&amp;sn=be54b63bc58b467fcee15370dbce8806&amp;chksm=e80db5f09c3de103ad7e38c1ef28073395a925594ce711683d95d06209defd462ae0e622eff3&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNtUN6p8Vm7ToM3tnM3q2nT3r51xXCVJu4UU5zVubWloA7IuyYaibicBTMpibaZmNltsxEvy7munYorQ/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "英泽家园",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 0,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000017,
            "type": 49,
            "datetime": 1729765624,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "1024程序员节 | 不要BUG，只要HAPPY！",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484378&amp;idx=1&amp;sn=9d530b9b817d35b37304feff278c957d&amp;chksm=e8c36434602ccc3e6db272ec6085ea86d5429714ac8d2f5f939919821516cc4016b7dbb64a6b&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gPWxdxYhIbCNXf5L1fddDmXGj0FA9Gk3zTewhuACN2zlk2GLQqfaqtjvCB1Z2tdmMnGUiakG2pj1kg/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "英泽家园",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 0,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000016,
            "type": 49,
            "datetime": 1727733600,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "欢度国庆丨英泽科技祝全体员工国庆节快乐！",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484221&amp;idx=1&amp;sn=fabd3edb99b2f294c09ec4ce87eaf8ee&amp;chksm=e8709ada8caedfc8a5a5dcc1a00459b6ca85b2749ddbd2c64b1ac98b2543b15e77bb933520bc&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gNSGcDvVwY5XJpbiciaJR9HFyDbibAwANokGrnWVJT2Nac9Xz9CjAp2p4xWPN6vuWdwY9FeAhZzJw0IA/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 8,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000015,
            "type": 49,
            "datetime": 1726524000,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "喜迎中秋丨英泽科技祝全体员工中秋节快乐，阖家幸福！",
            "digest": "",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484170&amp;idx=1&amp;sn=acc8424fbc6be4a9b57beb03f8d94327&amp;chksm=e8765d9c17370fa37dc369650e37b1171ca905735780620353bc1d84b5ad04c4076ad2f0ee87&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gOeVdtyFKrIM3pibEEx4LQpMNhJVv3ciaafscLuLhCEuOQI1LKR0sFL0rqAVouYtM812g8U7M1ONg0w/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 8,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    },
    {
        "comm_msg_info": {
            "id": 1000000014,
            "type": 49,
            "datetime": 1719633132,
            "fakeid": "3243440647",
            "status": 2,
            "content": ""
        },
        "app_msg_ext_info": {
            "title": "第二三季度员工生日会|不管几岁,开心万岁！",
            "digest": "有一种企业关怀，总是悄悄浸入心灵，一定是特别的缘分，才让我们一路相伴。",
            "content": "",
            "fileid": 0,
            "content_url": "http://mp.weixin.qq.com/s?__biz=MzI0MzQ0MDY0Nw==&amp;mid=2247484105&amp;idx=1&amp;sn=6d536336ccf28aacff6f85303ea8a851&amp;chksm=e8aa2816e1a1f81d149bcaa40781a7e48350aa3ca5bffddf5934943f9094037824d7147ec639&amp;scene=27#wechat_redirect",
            "source_url": "",
            "cover": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/OfvKflvr9gOzQ5K64ib4AhibWsNQvRgR4W019kvwN8JVMPJoGibvp0vc9bOfXFUibG1ZGiay49dicJ6krDia4n9R2BgEQ/0?wx_fmt=jpeg",
            "subtype": 9,
            "is_multi": 0,
            "multi_app_msg_item_list": [

            ],
            "author": "英泽家园",
            "copyright_stat": 100,
            "duration": 0,
            "del_flag": 1,
            "item_show_type": 0,
            "audio_fileid": 0,
            "play_url": "",
            "malicious_title_reason_id": 0,
            "malicious_content_type": 0
        }
    }
])

const formatDate = (timestamp: number) => {
    const date = new Date(timestamp * 1000)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    })
}

function getLocalCover(item: any) {
    console.log('sasas', item)
    return new URL(`../assets/news/news_${item.comm_msg_info.id}.jpg`, import.meta.url).href
    try {
        return new URL(`../assets/news/news_${item.comm_msg_info.id}.jpg`, import.meta.url).href
    } catch (e) {
        return item.app_msg_ext_info.cover
    }
}

const scrollRef = ref<HTMLElement | null>(null)
let scrollTimer: number | null = null

function startScroll() {
    if (scrollTimer) return
    scrollTimer = window.setInterval(() => {
        const el = scrollRef.value
        if (el) {
            if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 2) {
                el.scrollLeft = 0
            } else {
                el.scrollLeft += 2
            }
        }
    }, 20)
}

function stopScroll() {
    if (scrollTimer) {
        clearInterval(scrollTimer)
        scrollTimer = null
    }
}

onMounted(() => {
    startScroll()
})

onBeforeUnmount(() => {
    stopScroll()
})
</script>

<style scoped>

.container{
    padding-top: 60px;
}
.left-title {
    min-width: 263px;
    max-width: 263px;
    margin-right: 30px;
}

.new-index {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    gap: 32px;
    padding: 0px 0 30px 0;
    scrollbar-width: none;
    /* Firefox */
}

.new-index::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Edge */
}

.content {
    width: 100%;
    display: flex;
}

.content>.left {
    margin-right: 30px;
    width: 263px;
}

.news-item {
    flex: 0 0 200px;
    min-width: 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: inset 0 4px 24px 0 rgba(0, 0, 0, 0.1);
    padding: 0px 18px 10px 18px;
    transition: box-shadow 0.2s, transform 0.2s;
    margin-bottom: 0;
    position: relative;
}

.news-item:hover {
    /* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16); */
    /* transform: translateY(-4px) scale(1.02); */
}

.news-content {
    flex: 1;
    padding-right: 0;
}

.news-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 16px;
    line-height: 1.3;
}

.news-digest {
    font-size: 15px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.6;
}

.news-meta {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #aaa;
    margin-bottom: 10px;
}

.news-author {
    margin-right: 18px;
    color: #409eff;
}

.news-cover {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-item:hover .news-cover img {
    transform: scale(1.04);
}
</style>