import { Component, AfterViewInit, ViewChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { register } from 'swiper/element/bundle';
import { SwiperOptions } from 'swiper/types';

// 注册 Swiper 自定义元素
register();

@Component({
  selector: 'app-banner-carousel',
  standalone: true,
  templateUrl: './banner-carousel.html',
  styleUrls: ['./banner-carousel.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BannerCarousel implements AfterViewInit { // 改为 AfterViewInit
  @ViewChild('swiperContainer') swiperContainer!: ElementRef;
  
  // 轮播图数据 - 纯文字和背景
  slides = [
    { 
      title: '夏季新品上市',
      subtitle: '探索最新设计系列',
      description: '限时优惠，全场8折起',
      bgColor: '#ff6b6b',
      textColor: '#ffffff'
    },
    { 
      title: '创意设计大赛',
      subtitle: '展示你的设计才华',
      description: '赢取万元奖金及专业设备',
      bgColor: '#4ecdc4',
      textColor: '#2d3436'
    },
    { 
      title: '专业设计工具',
      subtitle: '提升你的创作效率',
      description: '高级功能免费试用30天',
      bgColor: '#ffe66d',
      textColor: '#2d3436'
    }
  ];

   // Swiper 配置
  swiperConfig: SwiperOptions = {
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
      pauseOnMouseEnter: true
    },
    pagination: {
      clickable: true
    },
    navigation: true,
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    speed: 1000
  };

   ngAfterViewInit() {
    // 初始化 Swiper
    setTimeout(() => {
      if (this.swiperContainer && this.swiperContainer.nativeElement) {
        Object.assign(this.swiperContainer.nativeElement, this.swiperConfig);
        this.swiperContainer.nativeElement.initialize();
      }
    }, 0);
  }
}