import { ToolsHelper } from '../utils/ToolsHelper'

type ItemType = (string | number | Object)

@Preview
@Component
export struct RefreshView {
  @Prop isLoading: boolean
  @Prop data: ItemType[]
  loadMore(){}
  refresh(){}

  aboutToAppear(): void {
    this.refresh()
  }

  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
  @BuilderParam customBuilderParam: (item:string) => void

  build() {

    Refresh({ refreshing: $$this.isLoading }) {
      List() {
        ForEach(this.data ?? [], (item: string) => {
          ListItem() {
            this.customBuilderParam(item)
          }
          .backgroundColor('blue')
        }, (index: number) => index.toString())
      }
      .onScrollStart(() => {
        ToolsHelper.log('onScrollStart')
      })
      .onScrollStop(() => {
        ToolsHelper.log('onScrollStop')
      })
      .onTouch((event: TouchEvent) => {
        const e1 = event.touches[0]
        ToolsHelper.log(`onTouch ${event.type}-${e1.x.toString()}-${e1.y.toString()}`)
      })
      .onScrollIndex((first: number, last: number) => {
        ToolsHelper.log(`${first.toString()}-${last.toString()}`)
      })
      .width('100%')
      .height('100%')
      .alignListItem(ListItemAlign.Center)
      .scrollBar(BarState.Off)
    }.width('100%')
    .backgroundColor('red')
    .height('100%')
    .onStateChange((refreshStatus: RefreshStatus) => {
      ToolsHelper.log('Refresh onStatueChange state is ' + refreshStatus)
    })
    .onRefreshing(() => {
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
      ToolsHelper.log('onRefreshing test')
    })
  }
}