TabLiveComponent.ets 8.04 KB
import { ContentDetailDTO, LiveRoomItemBean } from 'wdBean/Index'
import { CustomPullToRefresh, EmptyComponent, ErrorComponent, WDViewDefaultType } from 'wdComponent/Index'
import { TabLiveItemComponent } from './TabLiveItemComponent'
import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean'
import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
import { ViewType } from 'wdConstant/Index'
import { LazyDataSource, StringUtils } from 'wdKit/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { Logger } from 'wdKit'
import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout'
import { PeopleShipNoMoreData } from 'wdComponent/src/main/ets/components/reusable/PeopleShipNoMoreData'
import { LiveMessageOptType } from 'wdBean/src/main/ets/bean/live/LiveRoomBean'

const TAG: string = 'TabLiveComponent';

/**
 *  非沉浸式直播间组件
 */
@Component
export struct TabLiveComponent {
  liveViewModel: LiveViewModel = new LiveViewModel()
  @State liveList: LazyDataSource<LiveRoomItemBean> = new LazyDataSource();
  @Consume @Watch('updateData') contentDetailData: ContentDetailDTO
  @State private pageModel: PageModel = new PageModel()
  private scroller: Scroller = new Scroller()
  @Prop @Watch("lastInputedCommentChanged") lastInputedComment: LiveRoomItemBean



  aboutToAppear(): void {

      this.getLiveList()
  }

  lastInputedCommentChanged(info: string) {
    Logger.debug(TAG, "1显示评论》》》: " + JSON.stringify(this.lastInputedComment))
    switch (this.lastInputedComment.optionType) {
      case LiveMessageOptType.ZH_UPDATE_MSG: {
        const index = this.liveViewModel.getLiveRoomItemBeanIndex(this.lastInputedComment,this.liveList)
        this.liveList.updateItem(this.lastInputedComment,index)
        return
      } break
      case LiveMessageOptType.ZH_DELETE_MSG: {
        const index = this.liveViewModel.getLiveRoomItemBeanIndex(this.lastInputedComment,this.liveList)
        this.liveList.deleteItem(index);
        return
      }
      break
      case LiveMessageOptType.ZH_TOP_MSG: {

      } break
      case LiveMessageOptType.ZH_UN_TOP_MSG: {

      } break
      case LiveMessageOptType.ZH_WALL_MSG: {

      } break
    }

    if (this.liveList.totalCount() === 0) {
      this.liveList.push(this.liveViewModel.deepCopyLiveRoomItem(this.lastInputedComment))
    } else {
      this.liveList.addFirstItem(this.liveViewModel.deepCopyLiveRoomItem(this.lastInputedComment))
    }
    this.pageModel.viewType = ViewType.LOADED;
  }

  build() {
    Stack() {
      if (this.pageModel.viewType == ViewType.LOADING) {
        this.LoadingLayout()
      } else if (this.pageModel.viewType == ViewType.ERROR) {
        ErrorComponent()
      } else if (this.pageModel.viewType == ViewType.EMPTY) {
        EmptyComponent({ emptyType: WDViewDefaultType.WDViewDefaultType_NoContent1 })
      } else {
        CustomPullToRefresh({
          alldata: this.liveList,
          scroller: this.scroller,
          hasMore: false,
          customList: () => {
            this.ListLayout()
          },
          onRefresh: (resolve) => {
            this.pageModel.currentPage = 1
            this.getLiveList(resolve)
          },
        })

      }
    }
    .alignContent(Alignment.Top)
    .backgroundColor('#F5F5F5')
    .height('100%')
    .width('100%')
  }

  @Builder
  ListLayout() {

    List({ scroller: this.scroller }) {
      // 下拉刷新
      LazyForEach(this.liveList, (item: LiveRoomItemBean, index: number) => {
        ListItem() {
          TabLiveItemComponent({ item: item })
        }
      },
        (item: LiveRoomItemBean, contentIndex: number) => JSON.stringify(item)
      )
      // 加载更多
      ListItem() {
        if (this.pageModel.hasMore && this.liveList && this.liveList.totalCount() > 0) {
          LoadMoreLayout({ isVisible: this.pageModel.hasMore })
        } else if (!this.pageModel.hasMore && !this.pageModel.isLoading) {
          PeopleShipNoMoreData()
        }
      }
    }
    .edgeEffect(EdgeEffect.None)
    .scrollBar(BarState.Off)
    .onReachEnd(() => {
      Logger.debug(TAG, "触底了");
      if (!this.pageModel.isLoading && this.pageModel.hasMore) {
        //加载分页数据
         this.getLiveList()
      }
    })
  }

  @Builder
  LoadingLayout() {
    CustomRefreshLoadLayout({
      refreshBean: new RefreshLayoutBean(true,
        $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
    })
  }

  async getLiveList(resolve?: (value: string | PromiseLike<string>) => void) {
    if (!this.contentDetailData || !this.contentDetailData.newsId) {
      // 参数不够,直接拦截接口
      return
    }
    if (this.pageModel.isLoading) {

      if (resolve) {
        resolve('已更新至最新')
      }
      return
    }
    this.pageModel.isLoading = true
    this.pageModel.currentPage = 1
    this.liveViewModel.getLiveList(
      this.pageModel.currentPage,
      this.contentDetailData?.liveInfo?.mlive?.mliveId,
      this.contentDetailData?.newsId + '',
      20)
      .then(
        (data) => {
          this.pageModel.isLoading = false
          if (resolve) {
            if (this.pageModel.currentPage == 1) {
              resolve('已更新至最新')
            } else {
              resolve('')
            }
          }
          if(this.pageModel.currentPage ===1){
            this.liveList.clear()
          }
          Logger.debug(TAG, '直播间数据:' + `${JSON.stringify(data)}`)
          if (data.barrageResponses && data.barrageResponses.length > 0) {
            /**
             * 在直播聊天添加一条新内容逻辑:
             判断 oldNewsId:迁移id为空 且 直播状态不是预约:"wait"
             消息内容:
             1.头像固定:APP默认头像
             2.名称固定:人民日报主持人
             3.内容:详情接口的简介,newIntroduction
             */
            this.pageModel.viewType = ViewType.LOADED;

            this.liveList.push(...data.barrageResponses)
            if (data.barrageResponses.length === this.pageModel.pageSize) {
              this.pageModel.currentPage++;
              this.pageModel.hasMore = true;
            } else {
              this.pageModel.hasMore = false;
              if (StringUtils.isEmpty(this.contentDetailData.oldNewsId)
                && this.contentDetailData
                && this.contentDetailData.liveInfo.liveState != 'wait') {
                this.updateLiveListData()
              }
            }
          } else {
            if (StringUtils.isEmpty(this.contentDetailData.oldNewsId)
              && this.contentDetailData
              && this.contentDetailData.liveInfo.liveState != 'wait') {
              this.pageModel.viewType = ViewType.LOADED;
              this.updateLiveListData()
              this.pageModel.hasMore = false;
            } else {
              this.pageModel.viewType = ViewType.EMPTY;
            }

          }
        },
        () => {
          Logger.debug(TAG, `Error`)
          this.pageModel.viewType = ViewType.ERROR;

        })
  }

  updateLiveListData() {
    let liveRoomItemBeanTemp: LiveRoomItemBean = {} as LiveRoomItemBean
    liveRoomItemBeanTemp.text = this.contentDetailData.newIntroduction
    liveRoomItemBeanTemp.senderUserName = '人民日报主持人'
    liveRoomItemBeanTemp.pictureUrls = []
    liveRoomItemBeanTemp.pictureUrls.push(this.contentDetailData?.fullColumnImgUrls[0]?.url)
    liveRoomItemBeanTemp.dataType = LiveMessageOptType.ZH_TEXT_AND_IMAGE_MSG
    let temp = this.contentDetailData?.fullColumnImgUrls[0]
    if (temp) {
      liveRoomItemBeanTemp.pictureResolutions = []
      liveRoomItemBeanTemp.pictureResolutions.push(`${temp.height}*${temp.weight}`)
    }
    this.liveList.push(liveRoomItemBeanTemp)
  }

  aboutToDisappear(): void {
  }

  updateData() {
    if (this.liveList.totalCount() > 0) {
      // TODO 拦截刷新?根据业务斟酌下
      return
    }
    this.getLiveList()
  }
}