import { ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant';


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') })
    .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(){
      RelativeContainer() {
        Image(item.hImageUrl)
          .width('100%')
          .aspectRatio(16 / 9)
          .borderRadius($r("app.float.image_border_radius"))
          .objectFit(ImageFit.Cover)
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            left: { anchor: '__container__', align: HorizontalAlign.Start }
          })
          .id('img_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 })
          .alignRules({
            top: {anchor:'img_cover', align: VerticalAlign.Bottom},
            left: {anchor: 'img_cover', align: HorizontalAlign.Start},
            right:{anchor: 'img_cover', align: HorizontalAlign.End}
          })
          .id("tv_title")

      }
      .width('100%')
      .height($r('app.float.single_row_03_item_height'))
    }
    .backgroundColor(Color.White)
    .hoverEffect(HoverEffect.Scale)
    .alignItems(HorizontalAlign.Start)


  }
}