import { Action, ContentDTO, Params } from 'wdBean';
import { CommonConstants, ConfigConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import { WDRouterRule } from 'wdRouter';


const TAG = 'GridLayout01Component';

/**
 * 热点视频推荐
 * Grid_Layout-03
 * 支持添加视频、直播内容
 */
@Component
export struct GridLayout01Component {
  @StorageLink('currentBreakpoint') currentBreakpoint: string = 'xs';
  @State dataList?: ContentDTO[] = undefined
  @State adapterBeanList?: ContentDTO[] = []

  aboutToAppear() {
    this.buildAdapterBeanList(this.currentBreakpoint)
  }

  aboutToDisappear() {
  }

  build() {
    GridRow({
      columns: 12,
      gutter: { x: vp2px(2.5), y: vp2px(2.5) },
    }) {
      ForEach(this.dataList, (programmeBean: ContentDTO, index: number) => {
        GridCol({ span: { xs: 6, sm: 6, md: 3, lg: 3 } }) {
          this.buildItemTopImgBottomTxt01(programmeBean, index)
        }
      })
    }
    .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin'), bottom: 5 })
    .onBreakpointChange((currentBreakpoint: string) => {
      this.currentBreakpoint = currentBreakpoint
      this.buildAdapterBeanList(currentBreakpoint)
    })
  }

  // 只从list最后添加/补充数据item，不截断list
  buildAdapterBeanList(currentBreakpoint: string): void {
    if (!this.dataList || this.dataList.length == 0) {
      return
    }
    let divisor: number = 1; // 除数
    switch (currentBreakpoint) {
      case 'xs': // break; // pass through
      case 'sm':
        divisor = 2;
        break;
      case 'md': // break; // pass through
      case 'lg': // break; // pass through
      default:
        divisor = 4;
        break;
    }
    this.adapterBeanList = [] // 重置
    this.adapterBeanList.push(...this.dataList.reverse());
    let mod = this.dataList.length % divisor // 余数
    if (mod == 0) {
      return
    }
    // 在尾部补全数据
    let complementIndex = 0
    while (complementIndex < mod) {
      // 从原有数据前(循环)依次取数据，补充到列表尾部，
      this.adapterBeanList.push(this.dataList[complementIndex])
      complementIndex++
    }
    return
  }

  @Builder
  buildItemTopImgBottomTxt01(item: ContentDTO, index: number) {
    Column() {
      Image(item.hImageUrl)
        .width('100%')
        .aspectRatio(16 / 9)
        .borderRadius($r("app.float.image_border_radius"))
        .objectFit(ImageFit.Cover)

      Text(item.title)
        .width('100%')
        .margin({ top: 4, left: 6, right: 6 })
        .fontWeight(FontWeight.Normal)
        .textAlign(TextAlign.Start)
        .fontSize($r('app.float.font_size_14'))
        .fontColor($r('app.color.color_333333'))
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .backgroundColor(Color.White)
    .hoverEffect(HoverEffect.Scale)
    .alignItems(HorizontalAlign.Start)
    .onClick((event: ClickEvent) => {
      Logger.info(TAG, `buildItemTopImgBottomTxt01 onClick event index: ${index}`);
      let taskAction: Action = {
        type: 'JUMP_H5_BY_WEB_VIEW',
        params: {
          url: ConfigConstants.DETAIL_URL
        } as Params,
      };
      WDRouterRule.jumpWithAction(taskAction)
    })
  }
}