import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { Logger } from 'wdKit/Index';
import { ProcessUtils } from 'wdRouter';
import PageViewModel from '../../viewmodel/PageViewModel';

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

/**
 * 双图卡
 * 枚举值Zh_Grid_Layout-02
 * Zh_Grid_Layout-02
 *
 */
@Component
export struct ZhGridLayout02 {
  @State compDTO: CompDTO = {} as CompDTO
  @State operDataList: ContentDTO[] = []
  currentPage = 1
  pageSize = 12

  aboutToAppear() {
    Logger.debug(TAG, 'aboutToAppear ' + this.compDTO.objectTitle)
    this.currentPage = 1
    PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
      this.operDataList = []
      this.operDataList.push(...liveReviewDTO.list)
    })
  }

  build() {
    Column() {
      Scroll() {
        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({
            gutter: { x: 12, y: 22 },
            columns: { sm: listSize, md: 2 },
            breakpoints: { value: ['320vp', '520vp', '840vp'] }
          }) {
            ForEach(this.operDataList, (item: ContentDTO, index: number) => {
              GridCol() {
                this.buildItemCard(item);
              }
            })
          }
        }
      }
      .width("100%")
      .height("100%")
      // .layoutWeight(1)
      .edgeEffect(EdgeEffect.None)
      .scrollBar(BarState.Off)
      .onReachStart(() => {
        Logger.debug(TAG, 'onReachStart')
      })
      .onReachEnd(() => {
        Logger.debug(TAG, 'onReachEnd')
        this.addItems()
      })
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
    }
    .width(CommonConstants.FULL_WIDTH)
    // .width("100%")
    .height("100%")
    .padding({ left: 16, right: 16 })

    // .layoutWeight(1)

  }

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

  addItems() {
    Logger.debug(TAG, 'addItems')
    this.currentPage++
    PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
      this.operDataList.push(...liveReviewDTO.list)
      Logger.debug(TAG, 'addItems after: ' + this.operDataList.length)
    })
  }
}