import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';

// 引入Swiper 11
import Swiper from 'swiper';
import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';

@Component({
  selector: 'app-page-crm-platform',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './page-crm-platform.html',
  styleUrls: ['./page-crm-platform.scss']
})
export class PageCrmPlatform implements AfterViewInit {
  @ViewChild('swiperContainer') swiperContainer?: ElementRef;

  ngAfterViewInit(): void {
    // 初始化轮播图
    if (this.swiperContainer) {
      new Swiper(this.swiperContainer.nativeElement, {
        modules: [Navigation, Pagination, Autoplay, EffectFade],
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        speed: 600,
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        
      });
    }

    // 优化模块卡片悬停效果
    const cards = document.querySelectorAll('.module-card');
    cards.forEach(card => {
      card.addEventListener('mouseenter', () => {
        card.classList.add('hover');
      });
      
      card.addEventListener('mouseleave', () => {
        card.classList.remove('hover');
      });
    });
    
    // 导航链接交互效果
    const navLinks = document.querySelectorAll('.module-nav a');
    navLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        navLinks.forEach(l => l.classList.remove('active'));
        link.classList.add('active');
      });
    });
  }
}