<template>
    <div id="section2" class="features-section">
        <CanvasBackend />
        <div v-for="(card, index) in cards" :key="index" :ref="el => cardRefs[index] = el" class="card"
            :class="[{ 'in-view': inView[index] }, { 'reverse': card.reverse }]">
            <div class="content">
                <div class="title">
                    <img :src="card.icon" />
                    {{ card.title }}
                </div>
                <div class="dec">{{ card.dec }}</div>
            </div>
            <div class="img">
                <img :src="card.img" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import CanvasBackend from '@/components/CanvasBackend/index.vue'

const cards = [
    {
        title: '全自动乐跑体验',
        icon: new URL('@/assets/img/homePage/icons/visualization.svg', import.meta.url).href,
        dec: '自动上传跑步数据，无需手动操作，轻松完成乐跑任务',
        img: new URL('https:\/\/lepao-cloud.xxoo365.top\/view.php\/f9192f9d310b16a7e8e4ef2f71ac8629.png').href,
        reverse: false
    },
    {
        title: '智能成绩上传系统',
        icon: new URL('@/assets/img/homePage/icons/ai.svg', import.meta.url).href,
        dec: '支持夜间上传与异常修复，忘跑也能及时补救，成绩无忧',
        img: new URL('https:\/\/lepao-cloud.xxoo365.top\/view.php\/6cf4d3d8f5d9e6b41c525541c8949329.png').href,
        reverse: true
    },
    {
        title: '自由跑区与贴心服务',
        icon: new URL('@/assets/img/homePage/icons/quality.svg', import.meta.url).href,
        dec: '支持自定义跑步区域与乐跑时段，体验便捷又人性化',
        img: new URL('https:\/\/lepao-cloud.xxoo365.top\/view.php\/3132165c9476e659c710114f963e6814.png').href,
        reverse: false
    }
]


const cardRefs = ref([])
const inView = ref(cards.map(() => false)) // 初始化每个卡片的状态

let observers = []

onMounted(() => {
    cardRefs.value.forEach((el, index) => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    inView.value[index] = true
                    observer.disconnect()
                }
            },
            { threshold: 0.4 }
        )
        if (el) observer.observe(el)
        observers.push(observer)
    })
})

onUnmounted(() => {
    observers.forEach(observer => observer.disconnect())
})

</script>

<style lang="less" scoped>
.features-section {
    position: relative;
    background-image: linear-gradient(to bottom, #ebf2ff, hsla(0, 0%, 100%, 0));
    padding: 80px 20px;
    display: flex;
    gap: 50px;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .reverse {
        flex-direction: row-reverse;
        background: linear-gradient(346deg, #ebf2ff, #d6e0ff) !important;
    }

    .card {
        width: 1200px;
        display: flex;
        gap: 50px;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #ebf2ff, #d6e0ff);
        border-radius: 10px;
        height: 400px;
        opacity: 0;
        transform: translateY(100px);
        transition: all 0.8s ease-out;

        &.in-view {
            opacity: 1;
            transform: translateY(0);
        }

        .content {
            width: 500px;

            .title {
                font-weight: bold;
                font-size: 2.5em;
                font-family: Alimama ShuHeiTi, -apple-system, BlinkMacSystemFont;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .dec {
                margin-top: 15px;
                font-size: 1.4em;
                line-height: 35px;
                color: rgb(102, 102, 102);
            }
        }

        img {
            max-width: 500px;
            user-select: none;
        }
    }

    // 动画定义
    @keyframes slideFadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

}
</style>