/**
 * 视频频道，包含视频和直播
 * 视频为沉浸式,直播同新闻页面
 */
import { BottomNavDTO, TopNavDTO } from 'wdBean/Index'
import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
import { PageComponent } from './PageComponent';
import {  WDRouterPage, WDRouterRule } from 'wdRouter';

const TAG = 'VideoChannelPage'

@Component
export struct VideoChannelPage {
  readonly MAX_LINE: number = 1;
  private groupId: number = 0
  private swiperController: SwiperController = new SwiperController()
  // 自动刷新触发（双击tab自动刷新）
  @Prop autoRefresh: number = 0
  @Prop topNavList: TopNavDTO[]
  @Link _currentNavIndex?: number;
  @Consume barBackgroundColor: Color
  @Consume @Watch('setBarBackgroundColor') currentBottomNavInfo: BottomNavDTO // 当前底导信息
  @State @Watch('setBarBackgroundColor') currentTopNavSelectedIndex: number = 0;
  @State animationDuration: number = 0
  @State indicatorLeftMargin: number = 0
  @State indicatorWidth: number = 0
  // 传递给page的自动刷新通知
  @State autoRefresh2Page: number = 0

  aboutToAppear(): void {
    this.setBarBackgroundColor()
    console.log(TAG, 'aboutToAppear')
  }

  /**
   * 顶导、底导切换下标都到改变背景色，进入或退出沉浸式
   */
  setBarBackgroundColor() {
    if (this.currentTopNavSelectedIndex === 0 && this.currentBottomNavInfo?.name === '视频') {
      console.error('setBarBackgroundColor', '黑色')
      this.barBackgroundColor = Color.Black
    } else {
      this.barBackgroundColor = Color.White
      console.error('setBarBackgroundColor', '白色')
    }
  }

  /**
   * TODO:根据顶导配置获取颜色展示效果不对，待确认
   */
  getTopNavFontColor(item: TopNavDTO, index: number): Color | string {
    if (item.name === '视频' && this.currentBottomNavInfo.name === '视频') {
      return this.currentTopNavSelectedIndex === index ? Color.White : '#e5e0e0'
    } else {
      return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
    }
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      this.pageSwiperView()
      this.topNavView()
    }
    .width('100%')
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  @Builder
  topNavView() {
    Stack({alignContent: Alignment.TopEnd}) {
      Row() {
        ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
          Column() {
            Text(item.name)
              .fontSize($r('app.float.selected_text_size'))
              .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
              .fontColor(this.getTopNavFontColor(item, index))
              .padding({
                top: $r('app.float.top_tab_item_padding_top'),
                bottom: $r('app.float.top_tab_item_padding_bottom')
              })
              .maxLines(this.MAX_LINE)

            Row()
              .width(20)
              .height(3)
              .backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
              .backgroundImageSize(ImageSize.Contain)
              .visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)

          }
          .padding({
            left: $r('app.float.top_tab_item_padding_horizontal'),
            right: $r('app.float.top_tab_item_padding_horizontal'),
          })
          .onClick(() => {
            if (this.currentTopNavSelectedIndex === index) {
              this.autoRefresh++
            }
            this.currentTopNavSelectedIndex = index
            this.swiperController.changeIndex(index, true)

          })
        }, (item: TopNavDTO) => item.channelId + '')
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(this.currentTopNavSelectedIndex === 0 ? Color.Transparent : Color.White)

      // 搜索按钮
      Row() {
        Image($r('app.media.icon_search'))
          .width('24vp')
          .height('24vp')
      }
      .width('40vp')
      .margin({
        right: '10vp',
        top: '3vp',
      })
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        WDRouterRule.jumpWithPage(WDRouterPage.searchPage)
      })
      .backgroundColor(Color.Transparent)

    }

  }

  @Builder
  pageSwiperView() {
    Swiper(this.swiperController) {
      ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
        if (index == 0) {
          // 视频
          VideoChannelDetail({
            bottomNavIndex: $_currentNavIndex,
            topNavIndex: $currentTopNavSelectedIndex,
            groupId: this.groupId + '',
            pageId: item.pageId + '',
            channelId: item.channelId + '',
            autoRefresh: this.autoRefresh,
          })
        } else {
          // 直播
          PageComponent({
            currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
            navIndex: index,
            pageId: item.pageId + '',
            channelId: item.channelId + '',
            autoRefresh: this.autoRefresh
          }).margin({ top: 40 })
        }
      }, (item: TopNavDTO) => item.channelId + '')
    }
    .indicator(false)
    .loop(false)
    .width('100%')
    .height('100%')
    .cachedCount(-1)
    .displayCount(1, true)
    .alignSelf(ItemAlign.Start)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .onChange((index: number) => {
      this.currentTopNavSelectedIndex = index
    })
  }
}