import { StringUtils } from 'hxutil';
import { FirstPageNodeModel } from '../../datacenter/model/FirstPageNodeModel';
import { EntryListNodeModel } from '../model/EntryListNodeModel';
import { RouterUtil } from '../../util/RouterUtil';

/**
 * 首页四宫格节点
 * @author wubingsong@myhexin.com
 */
@Component
export struct FourEntryListNodeComponent {

  nodeModel: FirstPageNodeModel | null = null
  @State
  private isNodeShow: boolean = false
  @State
  private entryListNodeModelArr: EntryListNodeModel[] | null = null
  private static COLUMN_COUNT = 4

  aboutToAppear(): void {
    if (this.nodeModel != null) {
      let extraData = this.nodeModel.extraData
      if (StringUtils.isNotEmpty(extraData)) {
        let entryListNodes = JSON.parse(extraData) as EntryListNodeModel[]
        if (entryListNodes) {
          if (entryListNodes.length > FourEntryListNodeComponent.COLUMN_COUNT) {
            this.entryListNodeModelArr = entryListNodes.slice(0, FourEntryListNodeComponent.COLUMN_COUNT)
          } else {
            this.entryListNodeModelArr = entryListNodes
          }
          if (this.entryListNodeModelArr.length > 0) {
            this.isNodeShow = true
          }
        }
      }
    }
  }

  build() {
    Column() {
      List({ initialIndex: 0 }) {
        ForEach(this.entryListNodeModelArr, (item: EntryListNodeModel) => {
          ListItem() {
            this.createItem(item)
          }
        }, (item: EntryListNodeModel) => item.id.toString())
      }
      .width("100%")
      .height('auto')
      .lanes(FourEntryListNodeComponent.COLUMN_COUNT)
      .alignListItem(ListItemAlign.Center)
      .scrollBar(BarState.Off)
      .visibility(this.isNodeShow ? Visibility.Visible : Visibility.None)
    }
    .width("100%")
    .height(80)
    .backgroundImageSize(ImageSize.FILL)

  }

  @Builder
  createItem(item: EntryListNodeModel) {
    Column() {
      Image(item.imgUrl)
        .width(40)
        .height(40)
      Text(item.title)
        .margin( { top : 4 })
        .fontColor($r('app.color.color_333333'))
        .maxLines(1)
        .minFontSize(9)
        .maxFontSize(14)
        .fontSize(14)
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .height(80)
    .onClick(() => {
      RouterUtil.jumpPage(item.jumpUrl)
    })
  }
}