import { promptAction } from '@kit.ArkUI'
import HmLoading from '../05/components/HmLoading'

@Entry
@Component
struct RefreshCase {
  @State
  list: number[] = Array(20).fill(Math.random())
  @State
  isRefreshing: boolean = false
  @State
  isEnd: boolean = false
  total: number = 43

  // 自定义构建函数 - 给组件传递
  @Builder
  refreshContent() {
    Row({ space: 8 }) {
      LoadingProgress()
        .height(24)
      Text('正在玩命的加载')
    }
    .width('100%')
    .padding(12)
    .justifyContent(FlexAlign.Center)
  }

  scroller: Scroller = new Scroller()
  @State
  isLoading: boolean = false

  build() {
    Stack() {
      Column() {
        Text('isRefreshing:' + this.isRefreshing)
        Text('list的数量:' + this.list.length)
        // 刷新组件
        Refresh({ refreshing: $$this.isRefreshing, builder: this.refreshContent() }) {
          // 列表List+ListItem
          // 滚动：list(数量不确定的时候) + scroll(固定)
          List({ scroller: this.scroller }) {
            ForEach(this.list, (item: number) => {
              ListItem() {
                Row() {
                  Text(item.toString())
                }
                .width('100%')
                .padding(16)
                .border({
                  width: {
                    bottom: 1
                  }
                })
              }
            })
            if(this.isLoading){
              ListItem(){
                Row(){
                  Text('正在玩命的加载~')
                    .fontColor('#ccc')
                }.width('100%')
                .padding(12)
                .margin({
                  bottom:16
                })
                .justifyContent(FlexAlign.Center)
              }
            }
            if(this.list.length>this.total){
              ListItem(){
                Row(){
                  Text('我是有底线的~')
                    .fontColor('#ccc')
                }.width('100%')
                .padding(12)
                .justifyContent(FlexAlign.Center)
              }
            }
          }
          .onScrollStart(() => {
            // promptAction.showToast({
            //   message:'我开始滚动了'
            // })
            this.isEnd = false
          })
          .onScrollStop(() => {
            if (this.isLoading || this.list.length > this.total) {
              return
            }
            // promptAction.showToast({
            //   message: '我停止滚动了'
            // })
            if (this.isEnd) {
              this.isLoading = true
              this.scroller.scrollEdge(Edge.Bottom)
              setTimeout(() => {
                //   数据加载
                const list: number[] = Array(10).fill(Math.random())
                // 只有数组可以用...（伪数组和对象用不了）
                this.list.push(...list)
                this.scroller.scrollEdge(Edge.Bottom)
                this.isLoading = false
              }, 3000)
            }
          })
          .onReachEnd(() => {
            // promptAction.showToast({
            //   message: '我触底了'
            // })
            this.isEnd = true
          })

          //   1.开始滚动 - 更新状态为没有触底
          //   2.停止滚动 - 触底没有？触底了就加载数据，没有触底就不加载
          //   3.触底 - 记录一下触底了
        }
        .onRefreshing(() => {
          setTimeout(() => {
            //   1.数据更新的地方
            this.list = Array(20).fill(Math.random())
            //   2.手动关闭刷新状态
            this.isRefreshing = false
          }, 1000)

        })
      }
      .height('100%')
      .width('100%')

      // if (this.isLoading) {
      //   Column() {
      //     HmLoading()
      //   }.height('100%')
      //   .width('100%')
      //   .backgroundColor('#ba0a0000')
      //   .justifyContent(FlexAlign.Center)
      // }
    }
  }
}


// 下拉刷新总结：
//1.refresh组件 （是否刷新中$$  自定义刷新提示结构体？）
//2.内容是不限制的（List Column）
//3.刷新操作是在onRefreshing,数据的更新，刷新状态的关闭

// 上拉加载总结：
//   List组件
//    1.开始滚动了 - 更新为没有触底
//    2.停止滚动了 - 是否触底？
//    3.触底了(2次) - 记录触底

// loading条的展示
// 是否触底的提示