import { AxiosResponse } from '@ohos/axios'
import { getNoticeList, noticeTest, noticeParams, noticeRow } from '../api/notice'
import { router } from '@kit.ArkUI'
@Entry
@Component
struct NoticeList {
  @State params: noticeParams = {
    pageNum: 1,
    pageSize: 10,
    noticeTitle: ''
  }
  @State totalAll: number = 0
  @State noticeList: noticeRow[] = []
  @State refreshing: boolean = false;
  @State refreshOffset: number = 0;
  @State canLoad: boolean = false;
  @State refreshState: RefreshStatus = RefreshStatus.Inactive; // 刷新状态
  @State isLoading: boolean = false; // 是否在加载
  @State loadingText: string = ''; // 加载是文字
  getList = async () => {
    const result: AxiosResponse<noticeTest> = await getNoticeList(this.params)
    this.noticeList = result.data.rows
    this.totalAll = result.data.total
  }
  async aboutToAppear(){
    await this.getList()
  }
  // 自定义刷新布局
  @Builder
  refreshBuilder() {
    Stack({ alignContent: Alignment.Bottom }) {
      // 可以通过刷新状态控制是否存在Progress组件
      // 当刷新状态处于下拉中或刷新中状态时Progress组件才存在
      if (this.refreshState != RefreshStatus.Inactive && this.refreshState != RefreshStatus.Done) {
        Row() {
          LoadingProgress().height(32)
          Text("Refreshing...").fontSize(16).margin({ left: 20 })
        }
        .alignItems(VerticalAlign.Center)
      }
    }
    .clip(true)
    .height("100%")
    .width("100%")
  }

  // 自定义加载布局
  @Builder
  footer() {
    Row() {
      LoadingProgress().height(32).width(48)
        .visibility(this.isLoading ? Visibility.Visible : Visibility.None)
      Text(this.loadingText)
    }.width("100%")
    .height(64)
    .justifyContent(FlexAlign.Center)
  }
  // 刷新测试数据
  private async refreshData(){
    this.noticeList = []
    this.params = {
      pageNum: 1,
      pageSize: 10,
    }
    await this.getList()
    this.refreshing = false;
  }

  // 加载更多测试数据
  private async loadMoreData(){
    if(this.params.pageSize >= this.totalAll) {
      this.isLoading = false
      this.loadingText = '已加载全部数据'
    }else {
      this.params.pageSize += 10
      this.loadingText = '加载中'
      await this.getList()
      this.isLoading = false
    }
  }
  build() {
    Column(){
      // 顶部搜索
      // 顶部搜索
      Row(){
        Search({ value: $$this.params.noticeTitle, placeholder: '请输入公告标题' })
          .searchButton('搜索', {
            fontSize: 12
          })
          .width('95%')
          .height(30)
          .backgroundColor('#fff')
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 12, weight: 400 })
          .textFont({ size: 12, weight: 400 })
          .layoutWeight(1)
          .onSubmit(async () => {
            this.noticeList = []
            this.params.pageSize = 10
            await this.getList()
          })
      }.padding({left: 5, right: 5})
      Refresh({ refreshing: $$this.refreshing, builder: this.refreshBuilder() }) {
        List({space: 10}) {
          ForEach(this.noticeList, (item: noticeRow, index: number) => {
            ListItem(){
              Row(){
                Column(){
                  Text(item.noticeTitle).fontSize(14).fontWeight(600).lineHeight(19).margin({bottom: 5})
                    .fontColor('#3d3d3d').textOverflow({overflow: TextOverflow.Ellipsis}).maxLines(1)
                  Text(item.createTime).fontColor('#999').fontSize(12).lineHeight(16)
                }.alignItems(HorizontalAlign.Start).layoutWeight(1)
                Image($r('app.media.right_3')).width(12)
              }.width('100%').justifyContent(FlexAlign.SpaceBetween)
              .border({width: {bottom: this.noticeList.length == index + 1 ? 0 : 1}, color: '#eee'}).padding({top: 15, bottom: 15})
              .onClick(() => {
                router.pushUrl({
                  url: 'pages/NoticeDetail',
                  params: {
                    id: item.noticeId
                  }
                })
              })
            }.padding({left: 10, right: 10}).backgroundColor(Color.White)
          })
          ListItem() {
            this.footer();
          }
        }
        .onScrollIndex((start: number, end: number) => {
          // 当达到列表末尾时，触发新数据加载
          if (this.canLoad && end >= this.noticeList.length - 1) {
            this.canLoad = false;
            this.isLoading = true;
            this.loadMoreData()
          }
        })
        .onScrollFrameBegin((offset: number) => {
          // 只有当向上滑动时触发新数据加载
          if (offset > 5 && !this.isLoading) {
            this.canLoad = true;
          }
          return { offsetRemain: offset };
        })
        .scrollBar(BarState.Off)
        // 开启边缘滑动效果
        .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#f2f3f7')
      .padding(10)
      .onOffsetChange((offset: number) => {
        this.refreshOffset = offset;
      })
      .onStateChange((state: RefreshStatus) => {
        this.refreshState = state;
      })
      .onRefreshing(() => {
        this.refreshData()
      })
    }.height('100%')
  }
}