import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';

const TAG = 'Zh_Grid_Layout-02';
const FULL_PARENT: string = '100%';
let listSize: number = 2;

/**
 * 双图卡
 * 枚举值Zh_Grid_Layout-02
 * Zh_Grid_Layout-02
 *
 */
@Preview
@Component
export struct ZhGridLayout02 {
  @State compDTO: CompDTO = {} as CompDTO

  aboutToAppear() {
    if (this.compDTO.operDataList) {
      listSize = this.compDTO.operDataList.length > 5 ? 2 : this.compDTO.operDataList.length;
    }
  }

  build() {
    Column() {
      Row() {
        Image($r("app.media.redLine"))
          .width(3)
          .height(16)
          .margin({ right: 4 })
        Text(this.compDTO.objectTitle)
          .fontSize($r("app.float.font_size_17"))
          .fontColor($r("app.color.color_222222"))
          .fontWeight(600)
      }
      .justifyContent(FlexAlign.Start)
      .margin({ top: 8, bottom: 8 })
      .width(CommonConstants.FULL_WIDTH)


      GridRow({
        columns: { sm: listSize, md: 2 },
        breakpoints: { value: ['320vp', '520vp', '840vp'] }
      }) {
        ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
          GridCol() {
            this.buildItemCard(this.compDTO.operDataList[index]);
          }
        })
      }
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      top: 14,
      left: 16,
      right: 16
    })

  }

  /**
   * 组件项
   *
   * @param programmeBean item 组件项, 上面icon,下面标题
   */
  @Builder
  buildItemCard(item: ContentDTO) {
    Column() {
      Image(item.fullColumnImgUrls[0].url)
        .width(170)
        .height(95)
        .margin(16)
      Text(item.newsTitle)
        .fontSize(13)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }
    .width('100%')
  }
}