import { Component, AfterViewInit, Input } from '@angular/core';
// 导入 SwiperJS
import Swiper from 'swiper';

interface SwiperSlide{
  title?:string // 轮播图标题
  img?:string // 轮播图图片链接
  innerHTML?:string // 轮播图内嵌的HTML
}
// 定义组件
@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'app-comp-swiper',
  templateUrl: './comp-swiper.component.html',
  styleUrls: ['./comp-swiper.component.scss'],
  standalone: true,
})
export class CompSwiperComponent  implements AfterViewInit {
  // 输入属性：轮播图数据
  @Input() list:SwiperSlide[] = []
  /**
   * 轮播图参数
   * @see https://swiperjs.com/swiper-api
   */
  @Input() options:any
  // 输入属性：轮播图的高度和宽度
  @Input() height:string = "225px";
  @Input() width:string = "100%";

  swiper:Swiper|undefined
  constructor() { }
  // 视图渲染完成后初始化 Swiper
  ngAfterViewInit() {

    let defaultOptions:any = {
      loop:true,// 开启循环播放
      autoplay:{
        duration:5000,
      },
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    }
    // 如果传入了自定义配置，则合并到默认配置中
    if(this.options){
      Object.keys(this.options).forEach(key=>[
        defaultOptions[key] = this.options[key]
      ])
    }
    this.swiper = new Swiper(".swiper",defaultOptions);
    console.log(this.swiper)
  }
}