import { CompDTO, ContentDTO, } from 'wdBean';
import { BreakpointConstants,DurationEnum } from 'wdConstant';
import { BreakPointType, Logger } from 'wdKit';
import { CarouselLayout01CardView } from '../page/CardView';
import { EmptyComponent } from './EmptyComponent';

const TAG = 'BannerComponent';

/**
 * 轮播组件,即Banner/轮播大图/焦点图/自动滑动
 * 样式：
 * 'Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链
 */
@Component
export struct BannerComponent {
  @StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
  @State compDTO: CompDTO = {} as CompDTO

  watchCurrentBreakpoint() {
    Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
  }

  aboutToAppear() {
    Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
  }

  aboutToDisappear() {
    Logger.info(TAG, 'aboutToDisappear');
  }

  onPageShow() {
    Logger.info(TAG, 'onPageShow');
  }

  onPageHide() {
    Logger.info(TAG, 'onPageHide');
  }

  onBackPress() {
    Logger.info(TAG, 'onBackPress');
  }

  build() {
    if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
      Swiper() {
        ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
          this.buildItemBanner01(item, index)
        })
      }
      .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
      .padding({ bottom: 14 })
      .displayCount(this.buildDisplayCount()) // 仅展示1个图片
      .cachedCount(2)
      .index(1) // The default index of Swiper.
      .autoPlay(true)
      .interval(DurationEnum.DURATION_4)
      .indicator(Indicator.dot()
        .right(5)
        .itemWidth(4)
        .itemHeight(4)
        .selectedItemWidth(10)
        .selectedItemHeight(6))
      .loop(true)
      .duration(DurationEnum.DURATION_4)
      .vertical(false)
      .curve(Curve.Linear)
      .onChange((index: number) => {
        Logger.info(TAG, `Swiper onChange index : ${index}`);
      })
    } else {
      EmptyComponent({ emptyHeight: 200 })
    }
  }

  public buildDisplayCount(): number {
    return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
  }

  /**
   * 组件项
   *
   * @param programmeBean item 组件项
   */
  @Builder
  buildItemBanner01(item: ContentDTO, index: number) {
    CarouselLayout01CardView({
      item: item,
      index: index
    })
  }
}