import { CommonConstants, ViewType } from 'wdConstant';
import { Logger } from 'wdKit';
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 { CompDTO } from 'wdBean';
import PageHelper from '../../viewmodel/PageHelper';
import { channelSkeleton } from '../skeleton/channelSkeleton'
import { ProcessUtils } from 'wdRouter/Index';

const TAG = 'PageComponent';

@Component
export struct PageComponent {
  @State private pageModel: PageModel = new PageModel();
  navIndex: number = 0;
  pageId: string = "";
  channelId: 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() {

    RelativeContainer() {
      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 if (!this.pageModel.contentNeedScroll) {
            NoMoreLayout()
          }
        }
      }
      // comp自己处理分页，这里设置EdgeEffect.None
      .edgeEffect(this.pageModel.contentNeedScroll ? EdgeEffect.None : EdgeEffect.Spring)
      .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;
      })
      .id('page_list')

      // 挂角广告
      this.pageHornAd()

    }
  }

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

  /**
   *  页面挂角广告
   */
  @Builder
  pageHornAd() {

    if (this.pageModel.isShowAds) {

      if (this.pageModel.pageCornerAdv.matInfo != null) {
        if (1 == this.pageModel.isRightAdv) {
          // 页面右边挂角
          this.drawRightCornerAdvView(1)
        } else if (2 == this.pageModel.isRightAdv) {
          // 页面左边挂角
          this.drawLeftCornerAdvView(1)
        }
      } else if (this.pageModel.pageCornerContentInfo.advert != null) {
        if (1 == this.pageModel.isRightAdv) {
          // 页面右边挂角
          this.drawRightCornerAdvView(2)
        } else if (2 == this.pageModel.isRightAdv) {
          // 页面左边挂角
          this.drawLeftCornerAdvView(2)
        }
      }
    }

  }

  /**
   *
   * @param type  1:广告中心的挂角广告；2：展现中心的挂角广告
   */
  @Builder
  drawLeftCornerAdvView(type: number) {
    // 页面左挂角
    Image(type === 1 ? this.pageModel.pageCornerAdv.matInfo.matImageUrl[0]
      : this.pageModel.pageCornerContentInfo.advert.displayUrl)
      .width($r('app.float.vp_80'))
      .height($r('app.float.vp_80'))
      .id("left_iv")
      .alignRules({
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
      })
      .margin({
        bottom: "65vp",
        left: ('app.float.card_comp_pagePadding_lf')
      })
      .onClick(() => {
        // 广告业务跳转
        ProcessUtils.openAdvDetail(this.pageModel.pageCornerAdv.matInfo);
      })

    Image($r('app.media.icon_adv_horn_close'))
      .id('left_close')
      .width($r('app.float.vp_16'))
      .alignRules({
        top: { anchor: 'left_iv', align: VerticalAlign.Top },
        left: { anchor: 'left_iv', align: HorizontalAlign.Start },
      })
      .offset({
        x: -10,
        y: -10
      })
      .onClick(() => {
        // 关闭挂角广告
        this.pageModel.isShowAds = false;

      })

    if (type == 1) {
      Text($r('app.string.comp_advertisement'))
        .width($r('app.float.vp_28'))
        .height($r('app.float.vp_16'))
        .fontSize($r('app.float.font_size_10'))
        .fontColor(Color.White)
        .id('left_tag')
        .alignRules({
          bottom: { anchor: 'left_iv', align: VerticalAlign.Bottom },
          left: { anchor: 'left_iv', align: HorizontalAlign.Start },
        })
        .textAlign(TextAlign.Center)
        .backgroundColor($r('app.color.res_color_general_000000_30'))
        .borderRadius({
          topLeft: $r('app.float.vp_2'),
          topRight: $r('app.float.vp_2'),
          bottomLeft: $r('app.float.vp_2'),
          bottomRight: $r('app.float.vp_2')
        })
    }

  }

  /**
   *
   * @param type  1:广告中心的挂角广告；2：展现中心的挂角广告
   */
  @Builder
  drawRightCornerAdvView(type: number) {

    Image(type === 1 ? this.pageModel.pageCornerAdv.matInfo.matImageUrl[0]
      : this.pageModel.pageCornerContentInfo.advert.displayUrl)
      .width($r('app.float.vp_80'))
      .height($r('app.float.vp_80'))
      .id("right_iv")
      .alignRules({
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        right: { anchor: '__container__', align: HorizontalAlign.End },
      })
      .margin({ bottom: "65vp", right: $r('app.float.card_comp_pagePadding_lf') })
      .onClick(() => {

        if (type === 1) {
          // 广告业务跳转
          ProcessUtils.openAdvDetail(this.pageModel.pageCornerAdv.matInfo);
        } else {
          // 展现中心的业务跳转
          ProcessUtils.advJumpMainPage(this.pageModel.pageCornerContentInfo.advert)

        }

      })

    Image($r('app.media.icon_adv_horn_close'))
      .id('right_close')
      .width($r('app.float.vp_16'))
      .alignRules({
        top: { anchor: 'right_iv', align: VerticalAlign.Top },
        right: { anchor: 'right_iv', align: HorizontalAlign.End },
      })
      .offset({
        x: 10,
        y: -10
      })
      .onClick(() => {
        // 关闭挂角广告
        this.pageModel.isShowAds = false;

      })

    if (type == 1) {
      Text($r('app.string.comp_advertisement'))
        .width($r('app.float.vp_28'))
        .height($r('app.float.vp_16'))
        .fontSize($r('app.float.font_size_10'))
        .fontColor(Color.White)
        .id('right_tag')
        .alignRules({
          bottom: { anchor: 'right_iv', align: VerticalAlign.Bottom },
          right: { anchor: 'right_iv', align: HorizontalAlign.End },
        })
        .textAlign(TextAlign.Center)
        .backgroundColor($r('app.color.res_color_general_000000_30'))
        .borderRadius({
          topLeft: $r('app.float.vp_2'),
          topRight: $r('app.float.vp_2'),
          bottomLeft: $r('app.float.vp_2'),
          bottomRight: $r('app.float.vp_2')
        })
    }


  }

  async aboutToAppear() {
    // 选中tab，才请求数据。拦截大量接口请求
    if (this.navIndex === this.currentTopNavSelectedIndex) {
      this.getData();
    }
  }

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

  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;
    PageHelper.getInitData(this.pageModel)
    // let pageInfo = await PageViewModel.getPageInfo(this.pageModel.pageId);
    // if (pageInfo == null) {
    //   this.pageModel.viewType = ViewType.EMPTY;
    //   return;
    // }
    // this.pageModel.pageInfo = pageInfo;
    // this.pageModel.loadStrategy = 1
    // PageHelper.parseGroup(this.pageModel)
  }
}