// from yeyinglong, 19.06.2024

@Entry
@ComponentV2
struct ListItemGroupRepeat {
  @Local message: string = 'Hello World';
  @Local arr: Array<number> = []
  @Local lanes: number = 1

  aboutToAppear(): void {
    for (let i = 0; i < 20; i++) {
      this.arr.push(i)
    }
  }

  build() {
    Column() {
      Row() {
        Button('列数+1')
          .onClick(() => {
            this.lanes++
          })
        Button('列数-1')
          .onClick(() => {
            if (this.lanes > 1) {
              this.lanes--
            }
          })
      }
      List() {
        ListItemGroup({style:ListItemGroupStyle.CARD}) {
          Repeat<number>(this.arr)
            .virtualScroll({totalCount:this.arr.length})
            .each((item: RepeatItem<number>) => {
              ListItem({style:ListItemStyle.CARD}) {
                Text("Group:0,Item:" + item.item.toString())
              }
              .onAppear(()=>{
                console.log("LIST_TEST:Group0:onAppear:" + item.item)
              })
              .onDisAppear(()=>{
                console.log("LIST_TEST:Group0:onDisAppear:" + item.item)
              })
            })
        }
        .divider({strokeWidth:1, startMargin:12, endMargin:12})
        ListItemGroup({style:ListItemGroupStyle.CARD}) {
          Repeat<number>(this.arr)
            .virtualScroll({totalCount:this.arr.length})
            .each((item: RepeatItem<number>) => {
              ListItem({style:ListItemStyle.CARD}) {
                Text("Group:1,Item:" + item.item.toString())
              }
              .onAppear(()=>{
                console.log("LIST_TEST:Group1:onAppear:" + item.item)
              })
              .onDisAppear(()=>{
                console.log("LIST_TEST:Group1:onDisAppear:" + item.item)
              })
            })
        }
        .divider({strokeWidth:1, startMargin:12, endMargin:12})
        ListItemGroup({style:ListItemGroupStyle.CARD}) {
          Repeat<number>(this.arr)
            .virtualScroll({totalCount:this.arr.length})
            .each((item: RepeatItem<number>) => {
              ListItem({style:ListItemStyle.CARD}) {
                Text("Group:2,Item:" + item.item.toString())
              }
              .onAppear(()=>{
                console.log("LIST_TEST:Group2:onAppear:" + item.item)
              })
              .onDisAppear(()=>{
                console.log("LIST_TEST:Group2:onDisAppear:" + item.item)
              })
            })
        }
        .divider({strokeWidth:1, startMargin:12, endMargin:12})
      }.backgroundColor(0xDCDCDC)
      .height('100%')
      .width('100%')
      .cachedCount(3)
      .lanes(this.lanes)
    }
  }
}