import { ContentDetailDTO, InteractDataDTO } from 'wdBean/Index';
import Curves from '@ohos.curves'
import { ContentDetailRequest } from 'wdDetailPlayApi/Index'
import { DetailPlayShortVideoPage } from './DetailPlayShortVideoPage'

import {
  batchContentDetailParams,
  compListItem,
  contentListParams,
  getRecCompInfoParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { NetworkUtil, Logger, WindowModel, DateTimeUtils, LazyDataSource, EmitterUtils,
  EmitterEventId,
  NetworkType} from 'wdKit/Index';
import { PictureLoading } from './PictureLoading';
import { DisplayDirection } from 'wdConstant/Index';
import { window } from '@kit.ArkUI';
import { EmptyComponent, WDViewDefaultType } from 'wdComponent/Index';
import { TrackConstants, TrackingPageBrowse } from 'wdTracking/Index';
import { LottieView } from 'wdComponent/Index'

interface loadMoreData {
  pageNum: number;
  refreshTime: number;
  loadStrategy: string;
}

const TAG = 'VideoChannelDetail'
const storage = LocalStorage.getShared();

@Entry(storage)
@Component
export struct VideoChannelDetail {
  private groupId: string = '' // 楼层id
  @Provide private pageId: string = '' //页面id
  @Provide private pageName: string = ''
  private pageNum: number = 1
  private pageSize: number = 10
  private loadStrategy: string = 'first_load' // 首次加载： first_load, 上推刷新：  push_up, 下拉刷新： pull_down
  private refreshTime: number = new Date().getTime() // 第一页刷新时间，用于频道分页排序时过滤，查询时携带【首刷、下拉取当前最新时间；其他的都使用首刷的时间】
  private channelId: string = '' // 频道id
  private channelStrategy: string = '1' // 频道策略 1-推荐;2-时间线
  // private topicId?: string = '' // 专题id
  // private recommend?: string = '' // 0.非推荐，1.推荐；
  @Link @Watch('navIndexChange') bottomNavIndex: number
  @Link @Watch('navIndexChange') topNavIndex: number
  @Prop @Watch('autoRefreshChange') autoRefresh: number = 0
  @Consume barBackgroundColor: Color
  private swiperController: SwiperController = new SwiperController()
  @Consume showComment: boolean
  @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
  @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0
  @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @Consume @Watch('pageShowChange') pageShow: number
  @Consume @Watch('pageHideChange') pageHide: number
  @Provide switchVideoStatus: boolean = true
  // @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
  @Consume displayDirection: DisplayDirection
  @Provide showCommentList: boolean = false
  @State data: ContentDetailDTO[] = []
  @State dataContentDetail: LazyDataSource<ContentDetailDTO> = new LazyDataSource();
  @State currentIndex: number = 0
  @State interactDataList: InteractDataDTO[] = []
  @State totalCount: number = 0
  @State isMouted: boolean = false
  @State isNewMouted: boolean = false
  @State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图
  @State isOffLine: boolean = false // 存储视频下线状态用来展示缺省图
  @State isRequesting: boolean = false
  pageShowTime: number = 0;
  pageHideTime: number = 0;
  @Provide onlyWifiLoadVideo: boolean = false
  @Provide toastTextVisible: boolean = false
  @StorageLink('GestureLoadStrategy') GestureLoadStrategy: number = 0
  @State timer: number = -1

  ///视频下拉刷新
  @State currentOffset: number = 0
  @State endIndex: number = 0
  @Link isRefreshList: boolean
  autoRefreshChange() {
    if (this.topNavIndex === 0 && !this.isRequesting) {
      this.data = []
      this.interactDataList = []
      this.totalCount = 0
      this.isMouted = false
      this.getRecCompInfo()
    }

  }

  pageShowChange() {

    if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
      this.barBackgroundColor = Color.Black
      this.switchVideoStatus = true
      this.openFullScreen()
    }

    this.pageShowTime = DateTimeUtils.getTimeStamp()
  }

  pageHideChange() {
    this.barBackgroundColor = Color.Transparent
    this.switchVideoStatus = false
    this.closeFullScreen()

    // console.log(TAG, '一级视频隐藏')
    this.pageHideTime = DateTimeUtils.getTimeStamp()
    let duration = 0
    duration = Math.floor((this.pageHideTime - this.pageShowTime) / 1000)
    TrackingPageBrowse.trackCommonPageExposureEnd(TrackConstants.PageName.Customer_Personal,
      TrackConstants.PageName.Customer_Personal, duration)
  }

  /**
   * 监听视频频道激活或失活
   */
  navIndexChange() {
    // console.log('navIndexChange', this.bottomNavIndex, this.topNavIndex)
    if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
      // this.barBackgroundColor = Color.Black
      this.switchVideoStatus = true
      this.openFullScreen()
    } else {
      // this.barBackgroundColor = Color.Transparent
      this.switchVideoStatus = false
      this.closeFullScreen()
    }
  }

  getDetail() {
    // 注册监听网络连接
    this.netStatus = undefined
    let netStatus = NetworkUtil.isNetConnected()
    if (netStatus) {
      this.openFullScreen()
      // 根据视频频道传参查询视频楼层信息
      this.getRecCompInfo()

    } else {
      // 无网络
      this.netStatus = 1
    }
  }

  aboutToAppear() {
    this.getDetail()
    // Logger.info(TAG, 'aboutToAppear');
    // 注册监听网络连接
    EmitterUtils.receiveEvent(EmitterEventId.NETWORK_CONNECTED, (async (str?: string) => {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        let type: NetworkType | null = null
        if (str) {
          type = JSON.parse(str) as NetworkType
        }
        // 注册监听网络连接
        if (type != NetworkType.TYPE_UNKNOWN) {
          console.log(TAG, '网络连接状态变化', type)
          if(type == NetworkType.TYPE_CELLULAR || type == NetworkType.TYPE_WIFI) {
            this.getRecCompInfo()
          }
        }
      }, 1000)
    }))
  }

  aboutToDisappear(): void {
    this.closeFullScreen()
    // Logger.info(TAG, 'aboutToDisappear');
  }

  /**
   * 开启沉浸式
   */
  openFullScreen() {
    // WindowModel.shared.setWindowSystemBarProperties({
    //   statusBarContentColor: '#ffffff',
    // })
  }

  /**
   * 关闭沉浸式
   */
  closeFullScreen() {
    // WindowModel.shared.setWindowSystemBarProperties({
    //   statusBarContentColor: '#000000',
    //
    // })
  }

  onBackPress(): boolean | void {
    if (this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL) {
      this.displayDirection = DisplayDirection.VERTICAL
      WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
      window.Orientation.PORTRAIT :
      window.Orientation.LANDSCAPE)
    }
  }

  pageTransition() {
    // 为目标页面时，进入：从右边侧滑入，退出：是右侧划出；跳转别的页面：左侧划出，返回：左侧划入。
    PageTransitionEnter({ type: RouteType.Push, duration: 300 })
      .slide(SlideEffect.Right)
    PageTransitionEnter({ type: RouteType.Pop, duration: 300 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ type: RouteType.Push, duration: 300 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ type: RouteType.Pop, duration: 300 })
      .slide(SlideEffect.Right)
  }

  /**
   * 根据视频频道传参查询视频楼层信息
   */
  async getRecCompInfo() {
    if (this.data.length > 0 && this.data.length === this.totalCount) {
      AlertDialog.show({ message: '没有更多视频了~' })
      return
    }
    this.isRequesting = true
    if (this.pageNum === 1) {
      this.isRefreshList = true
      this.loadStrategy = 'first_load'
      this.refreshTime = new Date().getTime()
      this.dataContentDetail.clearAllData()
    }
    const params: getRecCompInfoParams = {
      groupId: this.groupId.length>2?this.groupId:this.pageId,
      pageId: this.pageId,
      channelId: this.channelId,
      loadStrategy: this.loadStrategy,
      channelStrategy: this.channelStrategy,
      pageNum: this.pageNum,
      pageSize: this.pageSize,
      refreshTime: this.refreshTime,
    }

    await ContentDetailRequest.getRecCompInfo(params).then(async res => {
      this.isOffLine = res.data == null ? true : false
      // console.log('根据视频频道传参查询视频楼层信息totalCount', res.data?.totalCount + '')

      this.totalCount = res.data?.totalCount || 0
      const list1: batchContentDetailParams = {
        contents: []
      }
      const list2: contentListParams = {
        contentList: []
      }

      if (res.data?.compList.length) {
        res.data?.compList.map((item: compListItem) => {
          list1.contents.push({
            contentId: item.operDataList[0].objectId,
            contentRelId: item.operDataList[0].relId,
            contentType: Number(item.operDataList[0].objectType),
            relId: item.operDataList[0].relId,
            relType: item.operDataList[0].relType,
          })

          list2.contentList.push({
            contentId: item.operDataList[0].objectId,
            contentType: Number(item.operDataList[0].objectType),
          })
        })
      }

      await this.batchContentDetail(list1, list2)

      setTimeout(() => {
        this.isMouted = true
      }, 500)

    }).catch(() => {
      //   获取内容失败请重试
      this.isRequesting = false
      this.isRefreshList = false
    })
  }

  /**
   * 根据视频楼层信息批量查询视频列表
   */
  async batchContentDetail(list: batchContentDetailParams, list2: contentListParams) {
    if (list.contents.length > 0) {
      await ContentDetailRequest.batchContentDetail(list).then(async res => {
        this.isRefreshList = false
        if (res.data) {
          await this.getContentInteract(list2)
          this.data = this.data.concat(res.data)
          this.dataContentDetail.addItems(res.data)
        }
        // console.log('根据视频楼层信息批量查询视频列表', JSON.stringify(res.data))
      }).finally(() => {
        setTimeout(() => {
          this.isRequesting = false
        }, 2000)

      })
    } else {
      this.isRefreshList = false
      this.isRequesting = false
    }
  }

  /**
   * 根据视频信息批量查询点赞、收藏状态
   */
  async getContentInteract(list: contentListParams) {
    if (list.contentList.length > 0) {
      await ContentDetailRequest.getContentInteract(list).then(res => {
        if (res.data) {
          this.interactDataList = this.interactDataList.concat(res.data)
        }
        // console.log('根据视频信息批量查询点赞、收藏状态', res.data)
      })
    }
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      if (this.netStatus !== undefined) {
        if (this.isNewMouted){
          PictureLoading()
        }else {
          EmptyComponent({
            emptyType: 1, emptyButton: true, isBlack: true, showBackButton: false,  retry: () => {
              this.isNewMouted = true
              let timer = setInterval(() => {
                this.isNewMouted = false
                clearInterval(timer);
              }, 500);
              this.getDetail()
            }
          })
        }
      } else if (this.isOffLine) {
        EmptyComponent({
          showBackButton: false,
          emptyType: WDViewDefaultType.WDViewDefaultType_NoVideo,
          retry: () => {
            this.getDetail()
          }
        })
      } else {

        PictureLoading()
          .visibility(this.isMouted ? Visibility.None : Visibility.Visible)

        Swiper(this.swiperController) {
          // LazyForEach(this.data, (item: ContentDetailDTO, index: number) => {
          LazyForEach(this.dataContentDetail, (item: ContentDetailDTO, index: number) => {
            DetailPlayShortVideoPage({
              contentDetailData: item,
              currentIndex: this.currentIndex,
              index: index,
              interactData: this.interactDataList[index]
            })
          }, (item: ContentDetailDTO) => item.newsId + '')
        }
        .displayCount(1, true)
        .cachedCount(3)
        .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || this.showCommentList ? false : true)
        .visibility(this.isMouted ? Visibility.Visible : Visibility.Hidden)
        .indicator(false)
        .vertical(true)
        .loop(false)
        .curve(Curves.initCurve(Curve.EaseIn))
        .width('100%')
        .height('100%')
        .onChange((index: number) => {
          this.currentIndex = index
          // console.info('onChange==', index.toString())

          // if (this.currentIndex === this.data.length - 1) {
          // 倒数第二个开始请求下一页数据解决视频上滑卡顿
          if (this.currentIndex === this.data.length - 2) {
            this.pageNum++
            this.refreshTime = new Date().getTime()
            this.loadStrategy = 'push_up'
            this.getRecCompInfo()
          }
        })
        .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) =>{
          console.log('视频tab下拉', index.toString() + extraInfo.currentOffset)
          this.currentOffset = extraInfo.currentOffset
        })
        .onAnimationEnd((index: number)=>{
          if (this.currentOffset > 0 && this.endIndex === 0) {
            this.autoRefreshChange()
          }
          this.endIndex = index
        })
        // 作为手势动画的背景
        Row() {}
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height('100%')
        .visibility(this.isMouted && this.GestureLoadStrategy == 0 ? Visibility.Visible : Visibility.Hidden)
        .backgroundColor('rgba(0, 0, 0, 0.50)')
        // 手势动画 初次进入显示
        if(this.isMouted && this.GestureLoadStrategy == 0) {
          LottieView({
            name: 'slider_up_view_more',
            path: "lottie/slider_up_view_more.json",
            lottieWidth: 167,
            lottieHeight: 167,
            autoplay: true,
            loop: true
          })
        }
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#000000')
    .onTouch(() => {
      if (this.isMouted && this.GestureLoadStrategy == 0) {
        ///解决首次加载动画滑动切换问题
        this.GestureLoadStrategy = 1
        this.swiperController.showNext()
      }
    })
  }
}