import { CollectionUtils, DateTimeUtils, Logger } 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 { CompDTO, LiveReviewDTO, PageDTO, PageInfoBean } 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: []
  };
  @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() {
            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) {
    if (this.navIndex === this.currentTopNavSelectedIndex) {
      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;
    }
    if (this.navIndex === 0) {
      await this.getVideoListData(pageInfo);
    } else {
      await this.getLiveListData(pageInfo);
    }


  }

  private async getVideoListData(pageInfo: PageInfoBean) {
    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;
      // }
    }
  }

  // private async getLiveListData(pageInfo: PageInfoBean) {
  //   // 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 getLiveListData(pageInfo: PageInfoBean) {
    // 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;
    // }
    Logger.debug(TAG, 'getPageUrlData ' + pageInfo.id);
    // pageInfo.groups.forEach(async (group) => { 不能按顺序加载用for...of替代
    for (const group of pageInfo.groups) {
      this.pageDto = await PageViewModel.getLivePageData(this.pageModel.pageId, `${group.id}`, this.pageModel.channelId, group.groupStrategy
        , this.pageModel.currentPage, this.pageModel.pageSize, 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(this.pageDto.compList).then((data: CompDTO[]) => {
          // 刷新，替换所有数据
          this.pageModel.compList.replaceAll(...data)
          this.pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
        })
        this.isFirstIn = false
      } 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();
  }
}