import { BottomNavDTO, NavigationDetailDTO, TopNavDTO } from 'wdBean';
import { Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout';
import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent';
import { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';
import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent';
import { channelSkeleton } from '../skeleton/channelSkeleton';
import { ParamType, TrackConstants, Tracking, TrackingButton } from 'wdTracking/Index';
import DailyPaperTopicModel from '../../model/DailyPaperTopicModel';
import { CompUtils } from '../../utils/CompUtils';
import ChannelViewModel from '../../viewmodel/ChannelViewModel';
import { GrayManageModel } from '../../viewmodel/GrayManageModel';
import { ColorUtils } from '../../utils/ColorUtils';
import { ImageKnifeComponent } from '@ohos/imageknife';
import { CommonUtils } from '../../utils/CommonUtils';

const TAG = 'TopNavigationComponent';

const storage = LocalStorage.getShared();

/**
 * 顶部页签导航栏/顶导
 */
@Entry(storage)
@Component
export struct TopNavigationComponentNew {
  private topRectHeight: number = AppStorage.get<number>('topSafeHeight') || 0;

  private pageName: string = ''
  private pageId: number = 0
  readonly MAX_LINE: number = 1; // 顶部tab text最大行数
  private swiperController: SwiperController = new SwiperController()
  private listScroller: Scroller = new Scroller()
  /**
   *  首页 底导 某个tab 对象
   */
  navItem: BottomNavDTO = {} as BottomNavDTO
  // 首页当前正在哪个tab的索引值
  @Link @Watch('setBarBackgroundColor') _currentNavIndex?: number;
  @Consume @Watch('pageShowChange') pageShow: number
  // 记录首页底部tab 的索引值
  @State bottomNavIndex: number = 0
  // 顶导当前选中/焦点下标
  @State @Watch('updateCurrentTopNavSelectedIndex') currentTopNavSelectedIndex: number = 0;
  // 顶导数据
  @State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
  @Consume barBackgroundColor: Color
  @Consume isImmersive: boolean
  //
  @State indexSettingChannelId: number = AppStorage.get<number>('indexSettingChannelId') || 2002
  //本地缓存频道id列表
  @State storageChannelIds: string = AppStorage.get<string>('channelIds') || ''
  // 首页设置的频道信息数组
  @State homeChannelList: TopNavDTO[] = []
  // 我的频道列表
  @State myChannelList: TopNavDTO[] = []
  // 更多频道列表
  @State moreChannelList: TopNavDTO[] = []
  // 地方频道列表
  @State localChannelList: TopNavDTO[] = []
  @ObjectLink @Watch('onAssignChannelChange') assignChannel: AssignChannelParam
  // 底导传递过来的自动刷新通知
  @Prop @Watch('onAutoRefresh') autoRefresh: number = 0
  // 传递给page的自动刷新通知
  @State autoRefresh2Page: number = 0
  @State animationDuration: number = 0
  // @State indicatorLeftMargin: number = 0
  // @State indicatorWidth: number = 0
  @State isClickMorningEveningPaper: boolean = false
  // 顶部导航栏是否有临时跳转频道数据不
  @State haveTempTabData: boolean = false
  @State backgroundImageH: number = 0
  // 国殇灰度管理
  GrayManage: SubscribedAbstractProperty<GrayManageModel> =  AppStorage.link<GrayManageModel>('GrayManage')

  build() {
    Column() {
      // 频道分类list
      RelativeContainer() {
        this.tabBar()
        Swiper(this.swiperController) {
          ForEach(CompUtils.isNews(this.navItem) ? this.myChannelList : this.topNavList,
            (navItem: TopNavDTO, index: number) => {
              if (CompUtils.isRMH(this.navItem) && this.isSpecialChannel(navItem)) {
                // 人民号 -- 关注tab
                PeopleShipMainComponent({
                  currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
                  navIndex: index,
                  pageId: navItem?.pageId + '',
                  channelId: navItem?.channelId + '',
                  autoRefresh: this.autoRefresh2Page
                })
                  .backgroundColor(Color.White)
              } else {
                if (!this.isBroadcast(navItem) && !this.isLayout(navItem)) {
                  if (CompUtils.isNews(this.navItem)) {
                    this.createPageComponent(navItem, index,
                      (channelId) => this.GrayManage.get().isNewsMourning(channelId));
                  } else if (CompUtils.isRMH(this.navItem)) {
                    this.createPageComponent(navItem, index,
                      (channelId) => this.GrayManage.get().isRmhMourning(channelId));
                  }

                } else {
                  channelSkeleton()
                    .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)
                }
              }
            })
        }
        .loop(false)
        .indicator(false)
        .effectMode(EdgeEffect.None)
        .index(this.currentTopNavSelectedIndex)
        .cachedCount(0)
        .id('pageContent')
        .alignRules({
          'top': { 'anchor': 'tabList', 'align': VerticalAlign.Bottom },
          'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
          'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom }
        })
        .onAnimationStart((curIndex: number, index: number) => {
          Logger.info(TAG, `onAnimationStart ${curIndex} ${index}`);
          if (curIndex === index) {
            return
          }

          this.channelJumpToPage(index)

        })
        .onAnimationEnd((index: number) => {
          Logger.info(TAG, `onAnimationEnd ${index}`);
        })
        .onChange((index) => {
          Logger.info(TAG, `onChange index : ${index}`);
          if (this.isLayoutByIndex(index) || this.isBroadcastByIndex(index)) {
            let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
            if (nextIndex < this.myChannelList.length) {
              // 电子报和播报 相邻
              if (this.isBroadcastByIndex(nextIndex) || this.isLayoutByIndex(nextIndex)) {
                nextIndex = this.currentTopNavSelectedIndex > index ? nextIndex - 1 : nextIndex + 1
                if (nextIndex < this.myChannelList.length) {
                  this.changePage(nextIndex)
                } else {
                  this.changePage(this.currentTopNavSelectedIndex)
                }

              } else {
                this.changePage(nextIndex)
              }
            } else {
              // 极左极右有特殊频道，用旧值
              this.changePage(this.currentTopNavSelectedIndex)
            }
          } else {
          }

        })
      }
      .width('100%')
      .height('100%')
    }

  }
  @Builder
   createPageComponent(navItem: TopNavDTO, index: number, mourningCheckFn: (channelId: string) => boolean) {
    PageComponent({
      currentTopNavSelectedIndex: this.currentTopNavSelectedIndex,
      navIndex: index,
      pageId: navItem?.pageId + '',
      channelId: navItem?.channelId + '',
      autoRefresh: this.autoRefresh2Page,
      isMourning: mourningCheckFn(`${navItem.channelId}`),
    })
      .backgroundColor(CompUtils.isRMH(this.navItem)?Color.White:Color.Transparent)
  }

  /**
   * 新闻tab 头部
   */
  @Builder
  topBar() {
    Column() {
      Row() {
        //新闻页面搜索组件
        FirstTabTopSearchComponent({ navItem: this.navItem })

        Image(this.navItem.logoUrl ? this.navItem.logoUrl : $r('app.media.icon_ren_min_ri_bao'))
          .width(72)
          .height(29)
          .onClick(() => {
            ProcessUtils.gotoENewsPaper()
          })

        // 新闻页面早晚报组件
        Stack({ alignContent: Alignment.Center }) {

          Image(this.navItem.morningAndEveningUrl ? this.navItem.morningAndEveningUrl :
          $r('app.media.background_read_paper_home'))
            .width('100%')
            .height('100%')
            .objectFit(ImageFit.Contain)

          Row() {

            Image($r('app.media.icon_read_paper_home'))
              .width(18)
              .height(18)
              .colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
              .margin({ right: '10lpx' })

            Text('早晚报')
              .fontColor(this.getBothColor("#666666"))
              .fontSize($r('app.float.font_size_13'))
          }
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Center)
        }
        .height(30)
        .width(124)
        .onClick(() => {
          //防止多次点击
          if (!this.isClickMorningEveningPaper) {
            this.isClickMorningEveningPaper = true;
            this.clickMorningEveningPaper()
          }
        })
      }.width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .height(40)
    .padding({ top: 10 })
    // 预留状态栏
    .margin({ top: this.topRectHeight + 'px' })
    .id('topBar')
    .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)
  }

  /**
   * 两侧文字图标颜色,搜索图标颜色
   * @returns
   */
  getBothColor(defaultColor: string): string {
    let bothColor = this.navItem.searchBothColor ? this.navItem.searchBothColor : defaultColor
    return bothColor
  }

  @Builder
  buildTabBarItems(mourningCheckFn: (channelId: string) => boolean) {
    ForEach(this.topNavList, (navItem: TopNavDTO, index: number) => {
      ListItem() {
        this.tabBarBuilder(navItem, index)
      }
      .grayscale(mourningCheckFn(`${navItem.channelId}`) ? 1 : 0)
    });
  }

  @Builder
  tabBar() {

    // 顶部背景图
    Image(this.navItem.backgroundUrl).width('100%').height('100%')
      .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)

    if (CompUtils.isNews(this.navItem)) {
      // 顶部搜索、日报logo、早晚报
      this.topBar()

      ChannelSubscriptionLayout({
        currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
        homeChannelList: this.homeChannelList,
        myChannelList: $myChannelList,
        moreChannelList: $moreChannelList,
        localChannelList: $localChannelList,
        haveTempTabData: this.haveTempTabData,
        navItem: this.navItem,
        changeTab: (index) => {
          this.channelJumpToPage(index)
        }
      })
        .id('channelManageBtn')
        .alignRules({
          'top': { 'anchor': 'topBar', 'align': VerticalAlign.Bottom },
          'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }
        })
        .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)

      List({ scroller: this.listScroller }) {
        ForEach(this.myChannelList, (navItem: TopNavDTO, index: number) => {
          ListItem() {
            this.tabBarBuilder(navItem, index)
          }
          .grayscale(this.GrayManage.get().isNewsMourning(`${navItem.channelId}`) ? 1 : 0)
        })
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)
      .padding({ left: 8, top: 0, right: 0 })
      .height($r('app.float.top_tab_bar_height'))
      .id('tabList')
      .alignRules({
        'top': { 'anchor': 'topBar', 'align': VerticalAlign.Bottom },
        'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
        'right': { 'anchor': 'channelManageBtn', 'align': HorizontalAlign.Start }
      })
    } else {
      // 顶部背景图
      // Image(this.navItem.backgroundUrl)
      //   .width('100%')
      //   .height(this.backgroundImageH)
      //   .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)

      Row() {
        Image($r('app.media.icon_search'))
          .colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
          .width('24vp')
          .height('24vp')
      }
      .height($r('app.float.top_tab_bar_height_common'))
      .width('40vp')
      .margin({ right: 10, top: this.topRectHeight + 'px' })
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .id('searchBtn')
      .alignRules({
        'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
        'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }
      })
      .onClick(() => {
        Logger.info(TAG, `搜索按钮点击: 人民号`);
        TrackingButton.searchClick(TrackConstants.PageName.Search, "PEOPLE")
        let params = { 'tabName': "PEOPLE" } as Record<string, string>
        WDRouterRule.jumpWithPage(WDRouterPage.searchPage, params)
      })
      .grayscale(this.GrayManage.get().isMourning() ? 1 : 0)

      List({ scroller: this.listScroller }) {
        if (CompUtils.isRMH(this.navItem)) {
          this.buildTabBarItems((channelId) => this.GrayManage.get().isRmhMourning(channelId));
        }
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.None)
      .height($r('app.float.top_tab_bar_height_common'))
      // 预留状态栏
      .margin({ top: this.topRectHeight + 'px' })
      .id('tabList')
      .alignRules({
        'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
        'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center }
      })
    }
  }

  /**
   *  顶部导航栏
   * @param item
   * @param index
   */
  @Builder
  tabBarBuilder(item: TopNavDTO, index: number) {
    Column() {

      if (item.iconUrl && item.iconCUrl) {
        // 有图
        ImageKnifeComponent({ imageKnifeOption: CommonUtils.getTopImageKnifeOption(item, this.currentTopNavSelectedIndex === index) })
          .height(36)
          .width(CommonUtils.calTopTabWidth(36,item.iconUrlSize))
          .enabled(false)
      } else {
        // 无图
        Text(item?.name)
          .fontSize($r('app.float.selected_text_size'))
          .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
          .fontColor(this.tabSelectedColor(this.currentTopNavSelectedIndex === index))
          .padding({
            top: $r('app.float.top_tab_item_padding_top'),
            bottom: $r('app.float.top_tab_item_padding_bottom')
          })
          .maxLines(this.MAX_LINE)
          .id(index.toString())
        if (this.currentTopNavSelectedIndex === index) {
          Image($r('app.media.icon_channel_active'))//.colorFilter(ColorUtils.getDrawingColorFilter(this.getBothColor("")))
            .width(20)
            .height(3)

        }
      }

    }
    .hoverEffect(HoverEffect.Highlight)
    .constraintSize({
      minWidth: $r('app.float.top_tab_item_min_width'),
      maxWidth: $r('app.float.top_tab_item_max_width')
    })
    .height('100%')
    // .backgroundColor(Color.Transparent)
    .padding({
      left: item.iconUrl && item.iconCUrl ? 0 : $r('app.float.top_tab_item_padding_horizontal'),
      right: item.iconUrl && item.iconCUrl ? 0 : $r('app.float.top_tab_item_padding_horizontal'),
    })
    .justifyContent(FlexAlign.Center)
    .id(`col_tabBar${index}`)
    // .margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 })
    .onClick(() => {
      Logger.debug(TAG, `onClick, index: ${index}`);
      if (this.currentTopNavSelectedIndex === index) {
        // 当前tab，单击事件
        this.doAutoRefresh()
      } else {
        this.channelJumpToPage(index)
      }
    })
  }



  /**
   *  频道文字颜色
   * @returns
   */
  tabSelectedColor(selected: boolean): string {
    if (selected) {
      return this.navItem.channelChooseColor ? this.navItem.channelChooseColor : '#222222'
    } else {
      let ccolor = this.navItem.channelChooseCColor.replace('#', '#B3')
      return this.navItem.channelChooseCColor ? ccolor : '#999999'
    }

  }

  /**
   * 频道信息跳转页面方法
   * @param index
   */
  private channelJumpToPage(index: number) {
    if (this.isBroadcastByIndex(index)) {
      // 跳转到播报页面
      ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
    } else if (this.isLayoutByIndex(index)) {
      // 跳转到电子报页面
      ProcessUtils.gotoENewsPaper()
    } else {
      this.changePage(index)
    }

  }

  /**
   *  改变频道页
   * @param index  频道所在的序列号
   */
  private changePage(index: number) {
    Logger.info(TAG, `修改页面 changePage index : ${index}`);
    this.currentTopNavSelectedIndex = index
    this.swiperController.changeIndex(index)
    this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
  }

  /**
   *  频道是播报
   * @param item
   * @returns
   */
  private isBroadcast(item?: TopNavDTO): boolean {
    return item?.channelId === 2066
  }

  /**
   * 频道是电子报
   * @param item
   * @returns
   */
  private isLayout(item?: TopNavDTO): boolean {
    return item?.channelId === 2006
  }

  /**
   * 检测播报
   * @param index
   * @returns
   */
  private isBroadcastByIndex(index: number): boolean {
    let item = this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]
    return this.isBroadcast(item)
  }

  /**
   *  检测电子报
   * @param index
   * @returns
   */
  private isLayoutByIndex(index: number): boolean {
    let item = this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]
    return this.isLayout(item)
  }

  private isSpecialChannel(item?: TopNavDTO) {
    // 版面、播报、关注，可以用这个判断
    return item?.channelType === 3
  }

  async aboutToAppear() {

    if (CompUtils.isNews(this.navItem)) {
      // 请求顶导网络数据
      this.getTopNavList(this.navItem.id)

    } else {
      this.changePage(this.currentTopNavSelectedIndex)
      // 背景图高度
      this.backgroundImageH = px2vp(this.topRectHeight) + 44
    }

    ColorUtils.changeTopStatusBarColor(this.navItem.statusBarColor, 1)

  }

  pageShowChange() {
    ColorUtils.changeTopStatusBarColor(this.navItem.statusBarColor, 1)
  }

  /**
   *  修改手机顶部状态栏颜色
   */
  setBarBackgroundColor() {


    if (this._currentNavIndex == this.bottomNavIndex) {
      ColorUtils.changeTopStatusBarColor(this.navItem.statusBarColor, 1)

      this.isImmersive = false
      this.barBackgroundColor = Color.White
    }

  }

  onTopNavigationDataUpdated() {
    Logger.info(TAG,
      `onTopNavigationDataUpdated currentTopNavIndex: ${this.currentTopNavSelectedIndex},topNavList.length:${this.topNavList.length}`);
  }

  /**
   *
   */
  updateCurrentTopNavSelectedIndex() {
    if (CompUtils.isNews(this.navItem)) {
      const tab = this.myChannelList[this.currentTopNavSelectedIndex]
      // 埋点
      const params: ParamType = {
        "pageName": tab.name,
        "tabName": tab.name,
        "pageId": tab.pageId,
      }
      Tracking.event("home_page_tab_click", params)
    } else if (CompUtils.isRMH(this.navItem)) {
      const tab = this.topNavList[this.currentTopNavSelectedIndex]
      // 埋点
      const params: ParamType = {
        "pageName": tab.name,
        "tabName": tab.name,
        "pageId": tab.pageId,
      }
      Tracking.event("People_account_page_tab_click", params)
    }
  }

  /**
   * 自动刷新方法
   */
  onAutoRefresh() {
    if (this.bottomNavIndex != this._currentNavIndex) {
      return
    }
    // 通知page刷新
    this.doAutoRefresh()
  }

  private doAutoRefresh() {
    // 通知page刷新
    this.autoRefresh2Page++
  }

  /**
   * 判断是否当前页面处理逻辑，如消息通知，只需要切换到当前底导的处理，过滤掉非当前。
   */
  private isCurrentPage(): boolean {
    return this._currentNavIndex === this.bottomNavIndex
  }

  /**
   * 频道id变化，即指定频道跳转场景
   */
  onAssignChannelChange() {

    if (!this.isCurrentPage()) {
      return
    }
    let channelId = this.assignChannel.channelId

    let index = -1
    if (this._currentNavIndex === 0) {
      // 第一个，新闻，先拿我的，再拿其他
      index = this.getChannelByMine(channelId)
      if (index == -1) {
        // 不在我的里，需要临时新增频道展示
        let channel = this.getChannelByOthers(channelId)
        if (channel) {
          this.myChannelList.push(channel)
          setTimeout(() => {
            this.changePage(this.myChannelList.length - 1)
          }, 20)
        }
      } else {
        // 直接切换
        this.changePage(index)
      }
    } else {
      index = this.getChannelByTopNav(channelId)
      if (index > -1) {
        // 找到了，直接切换，否则不处理
        this.changePage(index)
      }
    }

  }

  /**
   * 非新闻，从topNav里拿数据
   */
  private getChannelByTopNav(channelId: string) {
    for (let i = 0; i < this.topNavList.length; i++) {
      let topNavDTO: TopNavDTO = this.topNavList[i]
      if (topNavDTO.channelId.toString() === channelId) {
        return i
      }
    }
    return -1
  }

  /**
   * 新闻，从myChannelList里拿数据
   */
  private getChannelByMine(channelId: string) {
    for (let i = 0; i < this.myChannelList.length; i++) {
      let topNavDTO: TopNavDTO = this.myChannelList[i]
      if (topNavDTO?.channelId?.toString() === channelId) {
        return i
      }
    }
    return -1
  }

  /**
   * 新闻，从其他里拿数据
   */
  private getChannelByOthers(channelId: string) {
    for (let i = 0; i < this.moreChannelList.length; i++) {
      let topNavDTO: TopNavDTO = this.moreChannelList[i]
      if (topNavDTO.channelId?.toString() === channelId) {
        this.moreChannelList.splice(i, 1)
        this.haveTempTabData = true
        return topNavDTO
      }
    }
    for (let j = 0; j < this.localChannelList.length; j++) {
      let topNavDTO: TopNavDTO = this.localChannelList[j]
      if (topNavDTO.channelId?.toString() === channelId) {
        this.localChannelList.splice(j, 1)
        this.haveTempTabData = true
        return topNavDTO
      }
    }
    return null
  }

  /**
   *  进入早晚报专题
   */
  clickMorningEveningPaper() {

    // 早晚报埋点
    TrackingButton.click('morning_evening_news_click', TrackConstants.SummaryType.MorningAndEveningNews,
      TrackConstants.SummaryType.MorningAndEveningNews)

    if (NetworkUtil.isNetConnected()) {
      DailyPaperTopicModel.getDailyPaperTopic().then(dailyPaperTopicBean => {
        if (dailyPaperTopicBean && dailyPaperTopicBean.id > 0) {
          SPHelper.default.saveSync('dailyPaperTopicPageId', dailyPaperTopicBean.id);
          ProcessUtils.gotoMorningEveningPaper()
        } else {
          ToastUtils.showToast('暂无早晚报信息', 1000)
        }
        let timer = setInterval(() => {
          this.isClickMorningEveningPaper = false
          clearInterval(timer);
        }, 1000);
      }).catch((err: string) => {
        ToastUtils.showToast('暂无早晚报信息', 1000)
        let timer = setInterval(() => {
          this.isClickMorningEveningPaper = false
          clearInterval(timer);
        }, 1000);
      })
    } else {
      ToastUtils.showToast('网络出小差了，请检查网络后重试', 1000)
      let timer = setInterval(() => {
        this.isClickMorningEveningPaper = false
        clearInterval(timer);
      }, 1000);
    }
  }

  //请求顶导数据
  async getTopNavList(id: number) {


    // 1 、使用存储数据或者预置数据,首先使用缓存数据，其次使用预置数据
    let bottomDetailCache = await ChannelViewModel.getBottomNavDetailCacheData(id)

    if (bottomDetailCache != null && bottomDetailCache.topNavChannelList.length > 0) {
      Logger.debug(TAG, '使用缓存数据')
      this.processTopNewsTapData(bottomDetailCache, false)
    } else {
      let bottomDetailPreset = await ChannelViewModel.getPresetNewsTopTabData()
      if (bottomDetailPreset != null && bottomDetailPreset.topNavChannelList.length > 0) {
        Logger.debug(TAG, 'getTopNavList=预置数据=>' + bottomDetailPreset.topNavChannelList.length)
        this.processTopNewsTapData(bottomDetailPreset, false)
      }
    }

    // 2、请求网络数据
    let bottomNavDetail = await ChannelViewModel.getBottomNavDetailData(id, this.storageChannelIds)

    if (bottomNavDetail != null) {
      // 3、 接口数据md5和存储数据md5对比，一致不更新
      if (bottomNavDetail.md5 == bottomDetailCache?.md5) {
        Logger.debug(TAG, '不使用接口数据')
      } else {
        Logger.debug(TAG, '使用接口数据')
        this.processTopNewsTapData(bottomNavDetail, true)
        //存储
        ChannelViewModel.saveBottomDetailData(bottomNavDetail)
      }

    }

  }

  /**
   *  加工新闻tab 顶导数据
   * @param bottomNavDetail
   */
  private processTopNewsTapData(bottomNavDetail: NavigationDetailDTO, isNetData: boolean) {

    let topNavList = bottomNavDetail?.topNavChannelList || []

    let _myChannelList: TopNavDTO [] = []
    this.homeChannelList = []
    this.moreChannelList = []
    this.localChannelList = []
    topNavList.forEach(item => {
      if (item.defaultPermitted === 1) {
        this.homeChannelList.push(item)
      }
      //TODO 暂时隐藏播报
      if (item.name !== '播报') {
        if (item.myChannel === '1') {
          _myChannelList.push(item)
        } else if (item.moreChannel === '1' && item.myChannel !== '1') {
          this.moreChannelList.push(item)
        } else if (item.localChannel === '1' && item.myChannel !== '1') {
          this.localChannelList.push(item)
        }
      }
    })

    //根据缓存数组排序
    if (this.storageChannelIds && !isNetData) {
      Logger.debug(TAG, '根据存储内容')
      let sortedyChannelList: TopNavDTO [] = []
      let _storageChannelIds = this.storageChannelIds.split(',')
      _storageChannelIds.forEach((channelId) => {
        for (let a of _myChannelList) {
          if (channelId == String(a.channelId)) {
            let startIndex = _myChannelList.findIndex(b => b.channelId == a.channelId)
            _myChannelList.splice(startIndex, 1)
            sortedyChannelList.push(a)
            break;
          }
        }
      })
      // 依据存储的我的频道中频道id集合，过滤出符合条件频道，剩余的频道，针对本地频道处理，每次删除，再次进入存储的频道详情信息里面我的频道栏目的信息集合都有本地频道
      if (_myChannelList.length > 0) {

        _myChannelList.forEach((localChannelBean) => {
          localChannelBean.localChannel = '1'
        })
        this.localChannelList.unshift(..._myChannelList)
      }

      _myChannelList = sortedyChannelList
    }

    this.myChannelList = _myChannelList

    //缓存首页频道
    let index = this.myChannelList.findIndex(_item => _item?.channelId === this.indexSettingChannelId)
    if (index > -1) {
      this.currentTopNavSelectedIndex = index
    }

    if (isNetData) {
      // 存储我的频道栏目中的频道id信息
      Logger.debug(TAG, '存储我的频道栏目数据')
      let channelIds: number [] = []
      this.myChannelList.forEach(item => {
        if (item != undefined && item.channelId != undefined) {
          channelIds.push(item.channelId)
        }
      })
      AppStorage.setOrCreate('channelIds', channelIds.join(','))
    }

  }
}