<!-- src/views/pc/index.vue -->
<template>
  <div class="pc-home">
    <!-- 第一屏：全屏轮播 -->
    <div class="first-screen">
      <div class="carousel-wrapper">
        <a-carousel autoplay :autoplay-speed="5000" arrows dots-class="slick-dots slick-thumb">
          <div class="carousel-item">
            <video src="./video/9c4a6c72df9f8a4f6b013003cb2f6bd5.mp4" autoplay loop muted playsinline></video>
            <div class="carousel-content">
              <h1 class="animate-slide-in slideTitle">我们的愿景</h1>
              <p class="animate-slide-in delay-1 slideintro">成为全球企业信赖的能碳管理伙伴定义智慧零碳时代新标准</p>
              <p class="animate-slide-in delay-2 englishFont">BECOME A TRUSTED PARTNER IN ENERGY AND CARBON MANAGEMENT
                FOR GLOBAL ENTERPRISES; DEFINE THE NEW STANDARDS FOR THE ERA OF SMART ZERO CARBON.</p>
            </div>
          </div>
          <div class="carousel-item">
            <video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_2.mp4" autoplay loop
              muted playsinline></video>
            <!-- <div class="carousel-content">
              <h1 class="animate-slide-in">可持续发展</h1>
              <p class="animate-slide-in delay-1">推动绿色能源转型</p>
              <a-button class="animate-slide-in delay-2" type="primary" size="large">
                探索方案
              </a-button>
            </div> -->
          </div>
          <div class="carousel-item">
            <video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_3.mp4" autoplay loop
              muted playsinline></video>
            <!-- <div class="carousel-content">
              <h1 class="animate-slide-in">创新科技</h1>
              <p class="animate-slide-in delay-1">打造环保解决方案</p>
              <a-button class="animate-slide-in delay-2" type="primary" size="large">
                查看案例
              </a-button>
            </div> -->
          </div>
        </a-carousel>
      </div>

      <!-- 向下滚动指示器 -->
      <div class="scroll-indicator" @click="scrollToNext">
        <DownOutlined />
      </div>
    </div>

    <!-- 第二屏：核心产品 -->
    <div class="second-screen" ref="secondScreenRef">
      <div class="container">
        <div class="content-section animate-fade-in-up">
          <h2>
            <img src="./../../assets/images/point.png" />
            <span>核心产品</span>
          </h2>
          <ul class="core-products animate-fade-in-up">
            <li>AI智控</li>
            <li>高效节能</li>
            <li>能碳双控</li>
            <li>绿色低碳</li>
          </ul>
        </div>
        <div class="services-section">
          <a-row :gutter="[16, 16]" class="serviceList">
            <a-col :span="12">
              <div class="service-card animate-fade-in-up delay-1">
                <h3>全生命周期产品碳足迹平台</h3>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="service-card animate-fade-in-up delay-2">
                <h3>城市级能碳平台</h3>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]" class="serviceList2">
            <a-col :span="6">
              <div class="service-card animate-fade-in-up delay-3">
                <h3>城市级能碳平台</h3>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="service-card animate-fade-in-up delay-4">
                <h3>工业锅炉节能器</h3>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="service-card animate-fade-in-up delay-5">
                <h3>FMCS智能工业平台</h3>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="service-card animate-fade-in-up delay-6">
                <h3>ESG绿色认证咨询</h3>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <!-- 第三屏：AI+智能节能技术 -->
    <div class="three-screen" ref="threeScreenRef">
      <div class="container">

      </div>
    </div>
    <!-- 更多内容屏 -->
    <div class="other-screens">
      <div class="container">
        <div class="news-section animate-fade-in-up">
          <h2>最新动态</h2>
          <a-list class="news-list" :data-source="newsList" :split="false">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta :description="item.date">
                  <template #title>
                    <a href="javascript:;">{{ item.title }}</a>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DownOutlined } from '@ant-design/icons-vue'

// 新闻数据
const newsList = ref([
  { title: '公司荣获绿色企业称号', date: '2023-10-15' },
  { title: '新项目启动，推动城市低碳发展', date: '2023-09-28' },
  { title: '参与国际环保技术交流会', date: '2023-09-12' },
  { title: '发布最新碳中和解决方案', date: '2023-08-30' }
])

const secondScreenRef = ref<HTMLElement | null>(null)
const observer = ref<IntersectionObserver | null>(null)

// 滚动到下一屏
const scrollToNext = () => {
  const nextScreen = document.querySelector('.second-screen')
  if (nextScreen) {
    window.scrollTo({
      top: nextScreen.offsetTop,
      behavior: 'smooth'
    })
  }
}

// 初始化 Intersection Observer
const initIntersectionObserver = () => {
  observer.value = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible')
      }
    })
  }, {
    threshold: 0.1
  })

  // 观察所有需要动画的元素
  const animateElements = document.querySelectorAll('.animate-fade-in-up, .animate-slide-in')
  animateElements.forEach(el => {
    observer.value?.observe(el)
  })
}

onMounted(() => {
  initIntersectionObserver()
})

onBeforeUnmount(() => {
  if (observer.value) {
    observer.value.disconnect()
  }
})
</script>

<style lang="less" scoped>
@import 'style/index.less';
</style>