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';
import { NetworkUtil } from 'wdKit/Index';

@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;
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0

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

  build() {
    Column(){
      CustomTitleUI({titleName:'互动消息'})

      if(this.browSingModel.viewType == ViewType.EMPTY){
        EmptyComponent({emptyType:this.browSingModel.emptyType})
      }else {
        CustomPullToRefresh({
          alldata:this.allDatas,
          scroller:this.scroller,
          hasMore:this.browSingModel.hasMore,
          customList:()=>{
            this.ListLayout()
          },
          onRefresh:(resolve)=>{
            this.currentPage = 1
            this.getData(resolve)
          },
          onLoadMore:(resolve)=> {
            if (this.browSingModel.hasMore === false) {
              if(resolve) resolve('')
              return
            }
            this.currentPage++
            this.getData(resolve)
          }
        })
      }

    }
    .width(CommonConstants.FULL_WIDTH)
    .height(CommonConstants.FULL_HEIGHT)
    .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})

  }

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

      // 下拉刷新
      ForEach(this.allDatas, (InteractM: InteractMessageModel, compIndex: number) => {
        ListItem() {
          Column(){
            InteractMComponent({messageModel:InteractM})

            Divider()
              .color('#f5f5f5')
              .width('100%')
              .strokeWidth(1)
              .padding({left:16,right:16,top:16})
          }
        }
      })
      // 加载更多
      ListItem() {
        if (this.browSingModel.hasMore) {
        } else {
          NoMoreLayout()
        }
      }
    }
    .scrollBar(BarState.Off)
    .height(CommonConstants.FULL_PARENT)
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
  }

  @Builder
  likeUILayout(){
    Column(){
      Row(){
        Text('共获')
          .fontSize(18).height(40).align(Alignment.Bottom)
        Text(this.likeNum.toString())
          .fontSize(40)
          .fontColor(Color.Red)
          .fontFamily('BebasNeue')
          .margin(5).height(40).align(Alignment.Bottom)
        Text('赞')
          .fontSize(18).height(40).align(Alignment.Bottom)

      }.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){

    let netStatus = NetworkUtil.isNetConnected()
    if (netStatus) {
      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(element)
          }

          if (InteractMessageMItem.hasNext === 0) {
            this.browSingModel.hasMore = false;
          } else {
            this.browSingModel.hasMore = true;
          }
        } else {
          if (this.currentPage === 1) {
            this.browSingModel.viewType = ViewType.EMPTY;
            this.browSingModel.emptyType = WDViewDefaultType.WDViewDefaultType_NoMessage;
          }
        }
      })
    }else {
      this.browSingModel.viewType = ViewType.EMPTY;
      this.browSingModel.emptyType = WDViewDefaultType.WDViewDefaultType_NoNetwork;
    }
  }

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


}