import { Logger, DateTimeUtils, CollectionUtils } from 'wdKit';
import { CommonConstants, CompStyle, ViewType } from 'wdConstant';
import PageViewModel from '../../viewmodel/PageViewModel';
import { EmptyComponent } from '../view/EmptyComponent';
import { ErrorComponent } from '../view/ErrorComponent';
import PageModel from '../../viewmodel/PageModel';
import { listTouchEvent } from '../../utils/PullDownRefresh';
import RefreshLayout from './RefreshLayout';
import { RefreshLayoutBean } from './RefreshLayoutBean';
import NoMoreLayout from './NoMoreLayout';
import LoadMoreLayout from './LoadMoreLayout';
import CustomRefreshLoadLayout from './CustomRefreshLoadLayout';
import { CompParser } from '../CompParser';
import { GroupInfoDTO } from 'wdBean/src/main/ets/bean/navigation/PageInfoDTO';
import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
import { CompDTO, LiveReviewDTO, PageDTO ,PageInfoDTO} from 'wdBean';


const TAG = 'PageComponent';

@Component
export struct PageComponent {
  @State private pageModel: PageModel = new PageModel();
  navIndex: number = 0;
  pageId: string = "";
  channelId: string = "";
  pageNum: number = 1;
  isFirstIn: boolean = true
  pageDto: PageDTO = {
    pageId: '',
    id: 0,
    name: '',
    branchMark: false,
    compList: []
  }
  liveReviewDTO: LiveReviewDTO = {
    hasNext: false,
    pageNum: 0,
    pageSize: 0,
    totalCount: 0,
    list: []
  };
  name: string = "";
  @Link @Watch('onChange') currentTopNavSelectedIndex: number

  build() {
    Column() {
      if (this.pageModel.viewType == ViewType.LOADING) {
        // LoadingComponent()
        this.LoadingLayout()
      } else if (this.pageModel.viewType == ViewType.ERROR) {
        ErrorComponent()
      } else if (this.pageModel.viewType == ViewType.EMPTY) {
        EmptyComponent()
      } else {
        this.ListLayout()
      }
    }
    .width(CommonConstants.FULL_PARENT)
    .height(CommonConstants.FULL_PARENT)
    .onTouch((event: TouchEvent | undefined) => {
      if (event) {
        if (this.pageModel.viewType === ViewType.LOADED) {
          listTouchEvent(this.pageModel, event);
        }
      }
    })

  }

  @Builder
  ListLayout() {
    List() {
      // 下拉刷新
      ListItem() {
        RefreshLayout({
          refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,
            this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
        })
      }

      LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => {
        ListItem() {
          Column() {
            if (this.name == '视频') {
              VideoChannelDetail()
            } else {
              CompParser({ compDTO: compDTO, compIndex: compIndex });
            }

          }
        }
      },
        (compDTO: CompDTO, compIndex: number) => compDTO.id + compIndex.toString() + this.pageModel.timestamp
      )

      // 加载更多
      ListItem() {
        if (this.pageModel.hasMore) {
          LoadMoreLayout({
            refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
              this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
          })
        } else {
          NoMoreLayout()
        }
      }
    }
    .scrollBar(BarState.Off)
    .cachedCount(8)
    .height(CommonConstants.FULL_PARENT)
    .onScrollIndex((start: number, end: number) => {
      // Listen to the first index of the current list.
      this.pageModel.startIndex = start;
      // 包含了 头尾item，判断时需要考虑+2
      this.pageModel.endIndex = end;
    })
  }

  @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 aboutToAppear() {
    // 选中tab，才请求数据。拦截大量接口请求
    if (this.navIndex === 0 && this.navIndex === this.currentTopNavSelectedIndex) {
      this.getData();
    } else if (this.navIndex === 1) {
      this.getPreviewData()
    }

  }

  onChange() {
    Logger.info(TAG, `onChangezz id: ${this.pageId} , ${this.channelId} , ${this.navIndex} , ${this.isFirstIn} , navIndex: ${this.currentTopNavSelectedIndex}`);
    if (this.navIndex === this.currentTopNavSelectedIndex && !this.isFirstIn) {
      this.getData();
    }
  }

  /**
   * 要按顺序处理pageInfo.groups中的每个元素，并确保每个异步操作完成后再继续执行下一个，你应该避免使用forEach。
   * 取而代之的是，你可以使用for...of循环，并配合async/await来确保按顺序执行操作。
   * */
  async getData() {
    Logger.info(TAG, `getData id: ${this.pageId} , ${this.channelId} , navIndex: ${this.currentTopNavSelectedIndex}`);
    this.pageModel.pageId = this.pageId;
    this.pageModel.groupId = this.pageId;
    this.pageModel.channelId = this.channelId;
    this.pageModel.currentPage = 1;
    let pageInfo = await PageViewModel.getPageUrlData(this.pageModel.pageId);
    if (pageInfo == null) {
      this.pageModel.viewType = ViewType.EMPTY;
      return;
    }
    let groupInfo: GroupInfoDTO = CollectionUtils.getElement(pageInfo.groups, 0);
    if (groupInfo != null) {
      this.pageModel.isRecGroup = groupInfo.groupStrategy === 1;
      this.pageModel.groupId = groupInfo.id;
    }
    // pageInfo.groups.forEach(async (group) => { 不能按顺序加载用for...of替代
    // for (const group of pageInfo.groups) {
      this.pageDto = await PageViewModel.getPageData(this.pageModel, getContext(this))
      this.pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
      if (this.pageDto && this.pageDto.compList && this.pageDto.compList.length > 0) {
        this.pageDto.compList.forEach((comp) => {
          if (comp.compStyle === CompStyle.Zh_Grid_Layout_02 && this.liveReviewDTO && this.liveReviewDTO.list && this.liveReviewDTO.list.length > 0) {
            comp.operDataList.push(...this.liveReviewDTO.list)
          }
        })

        this.pageModel.viewType = ViewType.LOADED;
        this.pageModel.compList.push(...this.pageDto.compList)
        if (this.pageDto.compList.length === this.pageModel.pageSize) {
          this.pageModel.currentPage++;
          this.pageModel.hasMore = true;
        } else {
          this.pageModel.hasMore = false;
        }
        // // 二次请求，批查互动数据
        // PageViewModel.getInteractData(pageDto.compList).then((data: CompDTO[]) => {
        //   // 刷新，替换所有数据
        //   this.pageModel.compList.replaceAll(...data)
        //   this.pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
        // })
        this.isFirstIn = false
        Logger.debug(TAG, 'cj111');
      // } else {
      //   Logger.debug(TAG, 'aboutToAppear, data response page ' + this.pageId + ', comp list is empty.');
      //   this.pageModel.viewType = ViewType.EMPTY;
      // }
    }

  }

  async getPreviewData() {
    this.liveReviewDTO = await PageViewModel.getLiveReviewUrl(this.pageNum, this.pageModel.pageSize)
    Logger.debug(TAG, 'aboutToAppear, getPreviewData ' + this.liveReviewDTO.hasNext);
    this.getData();
  }
}