let counter: number = 0;

@Entry
@ComponentV2
struct MyComponent {
  @Local arr:Array<string> = [...Array(2)].map(() => `${++counter}`);
  @Local totalCount:number = this.arr.length;
  scroller: Scroller = new Scroller();

  shift() {
    this.arr.shift();
    this.totalCount = this.arr.length;
  }

  unshift() {
    this.arr.unshift(`${++counter}`);
    this.totalCount = this.arr.length;
  }

  update(index: number) {
    this.arr[index] = `${-this.arr[index]}`;
    this.totalCount = this.arr.length;
  }

  build() {
    Column() {
      Text('2_list.ets').fontSize(32)

      Row({space: 3}) {
        Button('Scroll top').onClick(() => this.scroller.scrollToIndex( 0))
        Button('Scroll 20' ).onClick(() => this.scroller.scrollToIndex(20))
        Button('Scroll 30' ).onClick(() => this.scroller.scrollToIndex(30))
      }.padding(10)

      Row({space: 3}) {
        Button('shift').onClick(() => this.shift())
        Button('unshift').onClick(() => this.unshift())
        Button('update #0').onClick(() => this.update(0))
      }.padding(10)

      List({ space: 3, scroller:this.scroller }) {
        Repeat(this.arr)
          // @ts-ignore 
          .virtualScroll({
            totalCount: this.totalCount
          })
          //
          .templateId((item:string, index:number) => {
            return index % 2 ? 'font-32' : 'something-wrong';
          })
          //
          .template("font-32", (ri) => {
            ListItem() { Text(`#${ri.index}: ${ri.item}`).fontSize(32) }.border({width:1})
          }, { cachedCount: 10 })
          
          .each((ri) => {
            ListItem() { Text(`#${ri.index}: ${ri.item}`).fontSize(64) }.border({width:1})
          })
          //
          .key((item, index) => {
            return `${item}`;
          })

      }
      .height('100%').border({width:1})
      .onScrollIndex((start, end) => {
        console.log('onScrollIndex', start, end);
      })

    }.height('100%').backgroundColor(0xeeeeee)
  }
}