import InteractMessageViewModel from '../../viewmodel/InteractMessageViewModel';
import PageModel from '../../viewmodel/PageModel';
import { CommonConstants, ViewType } from 'wdConstant'
import { EmptyComponent,WDViewDefaultType } from '../view/EmptyComponent'
import NoMoreLayout from './NoMoreLayout'
import { CustomTitleUI } from '../reusable/CustomTitleUI';
import { InteractMComponent } from '../InteractMessage/InteractMComponent';
import { InteractMessageModel, WDMessageCenterMessageType } from '../../model/InteractMessageModel';
import { CustomPullToRefresh } from '../reusable/CustomPullToRefresh';

@Entry
@Component
struct InteractMessagePage {
  @State private browSingModel: PageModel = new PageModel()
  isloading : boolean = false
  @Provide isEditState:boolean = false
  @State allDatas :InteractMessageModel[] = [];
  private scroller: Scroller = new Scroller();
  @State likeNum: number = 0
  @State  currentPage: number = 1;

  aboutToAppear(){
    this.getData()
    this.getMessageLikeCount()
  }

  build() {
    Column(){
      CustomTitleUI({titleName:'互动消息'})
      if(this.browSingModel.viewType == ViewType.ERROR){
        EmptyComponent({emptyType:WDViewDefaultType.WDViewDefaultType_NetworkFailed})
      }else if(this.browSingModel.viewType == ViewType.EMPTY){
        EmptyComponent({emptyType:WDViewDefaultType.WDViewDefaultType_NoHistory})
      }else {
        CustomPullToRefresh({
          alldata:this.allDatas,
          scroller:this.scroller,
          customList:()=>{
            this.ListLayout()
          },
          onRefresh:(resolve)=>{
            this.browSingModel.currentPage = 0
            this.getData(resolve)
          },
          onLoadMore:(resolve)=> {
            this.browSingModel.currentPage++
            this.getData()
          }
        })
      }

    }
    .width(CommonConstants.FULL_WIDTH)
    .height(CommonConstants.FULL_HEIGHT)
  }

  @Builder ListLayout() {
    List({scroller: this.scroller}) {
      ListItem(){
        this.likeUILayout()
      }

      // 下拉刷新
      ForEach(this.allDatas, (InteractM: InteractMessageModel, compIndex: number) => {
        ListItem() {
          InteractMComponent({messageModel:InteractM})
        }
      })
      // 加载更多
      ListItem() {
        if (this.browSingModel.hasMore) {
        } else {
          NoMoreLayout()
        }
      }
    }
    .height(CommonConstants.FULL_PARENT)
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
  }

  @Builder
  likeUILayout(){
    Column(){
      Row(){
        Text('共获')
          .fontSize(18)
        Text(this.likeNum.toString())
          .fontSize(30)
          .fontColor(Color.Red)
        Text('赞')
          .fontSize(18)

      }.height(75)


      Divider()
        .color('#f5f5f5')
        .backgroundColor('#f5f5f5')
        .width('100%')
        .height(5)
    }
    .alignItems(HorizontalAlign.Start)
    .padding({ left:16,right:16 })
    .width('100%')
    .height(80)

  }

  async getData(resolve?: (value: string | PromiseLike<string>) => void){
    InteractMessageViewModel.fetchMessageList(WDMessageCenterMessageType.WDMessageCenterMessageType_Interact,this.currentPage).then(InteractMessageMItem => {
      if(resolve) resolve('刷新成功')
      if (InteractMessageMItem && InteractMessageMItem.list && InteractMessageMItem.list.length > 0) {
        this.browSingModel.viewType = ViewType.LOADED;

        if (this.currentPage === 1) {
          this.allDatas = []
        }

        for (let index = 0; index < InteractMessageMItem.list.length; index++) {
          const element = InteractMessageMItem.list[index];
          element.InteractMsubM = JSON.parse(element.remark)
        }

        this.allDatas.push(...InteractMessageMItem.list)
        if (InteractMessageMItem.list.length === this.browSingModel.pageSize) {
          this.browSingModel.currentPage++;
          this.browSingModel.hasMore = true;
        } else {
          this.browSingModel.hasMore = false;
        }
      } else {
        this.browSingModel.viewType = ViewType.EMPTY;
      }
    })
  }

  async getMessageLikeCount(){
    InteractMessageViewModel.getMessageLikeCount().then(num => {
      this.likeNum = num
    })
  }


}