import lottie from '@ohos/lottie'
import { ContentDetailDTO, LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
import { LiveFollowComponent, LottieView } from 'wdComponent/Index'
import { NumberFormatterUtils, WindowModel } from 'wdKit/Index'
import { window } from '@kit.ArkUI'
import { WDAliPlayerController } from 'wdPlayer/Index'
import { DisplayDirection } from 'wdConstant/Index'
import { WDShare } from 'wdShare/Index'

/**
 *  沉浸式直播--- 头部标题
 */
@Preview
@Component
export struct PlayerTitleComponent {
  @Consume liveRoomDataBean: LiveRoomDataBean
  @Consume liveState: string
  @Consume contentDetailData: ContentDetailDTO
  @Consume displayDirection: DisplayDirection
  @State isLarge:boolean = false
  private playerController?: WDAliPlayerController
  @Consume isFullScreen: boolean

  aboutToAppear(): void {
    if (!this.playerController) {
      return
    }
    this.playerController.onVideoSizePlayerTitleComponentBack = (width: number, height: number) => {
      if(width>height){
        this.isLarge = false
      }else{
        this.isLarge = true
      }
    }
  }
  aboutToDisappear(): void {
    if (this.contentDetailData.liveInfo?.liveState == 'running') {
      ///lottieView身上已经有单独不展示时处理销毁，不用单独在销毁了，会影响展现组件列表上相同名称的动画展示
      // lottie.destroy('live_status_wait')
    }
  }

  build() {
    Column() {
      Row() {
        //返回键
        Image($r('app.media.icon_arrow_left_white'))
          .width(24)
          .aspectRatio(1)
          .visibility((this.isLarge && this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL) ? Visibility.Visible : Visibility.None)
          .margin({
            right: 10
          })
          .onClick(() => {
            WindowModel.shared.setPreferredOrientation((this.isLarge && this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL) ?
            window.Orientation.PORTRAIT :
            window.Orientation.LANDSCAPE)
            WindowModel.shared.setSpecificSystemBarEnabled(true)
            this.isLarge = false
            this.displayDirection = DisplayDirection.VERTICAL
            if(this.playerController){
              if(this.playerController.onVideoSizePlayerComponentBack){
                this.playerController.onVideoSizePlayerComponentBack(2,1);
              }
              // if(this.playerController.onVideoSizePlayerUIComponentMethod){
              //   this.playerController.onVideoSizePlayerUIComponentMethod(2,1);
              // }
            }
            this.isFullScreen = false
          })
        Text(this.contentDetailData.newsTitle || '')
          .maxLines(2)
          .fontSize(16)
          .fontWeight(500)
          .fontColor(Color.White)
        Blank().layoutWeight(1)
        //分享按钮
        Image($r('app.media.icon_share'))
          .width(24)
          .aspectRatio(1)
          .visibility((this.isLarge && this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL)  ? Visibility.Visible : Visibility.None)
          .margin({right:16})
          .onClick(() => {
            WDShare.shareContent(this.contentDetailData)
          })
      }.margin({ bottom: 10 })

      Row() {
        this.getLiveStatusView()
      }
      .margin({left: this.contentDetailData.rmhInfo?.rmhName ? 0 : 34})

    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
    .padding({
      top: 12,
      left: 16
    })

  }

  @Builder
  getLiveStatusView() {
    if (this.contentDetailData.rmhInfo?.rmhName) {
      LiveFollowComponent({
        rmhInfo: this.contentDetailData.rmhInfo
      }).margin({
        right: 10
      })

    }

    if (this.liveRoomDataBean.liveId) {
      Row() {
        if (this.liveState == 'running') {
          Stack() {
            Image($r('app.media.icon_live_status_running_back'))
              .width(22)
              .height(18)
            LottieView({
              name: 'live_status_wait',
              path: "lottie/live_detail_living.json",
              lottieWidth: 9,
              lottieHeight: 9,
              autoplay: true,
              loop: true,
            })
              .margin({ right: 2 })
          }.margin({ right: 1 })

          // Image($r('app.media.icon_live_status_running'))
          //   .width(22)
          //   .height(18)
          //   .margin({ right: 1 })
        }

        Text(this.liveState == 'running' ? '直播中' : '回看')
          .fontSize(11)
          .fontWeight(400)
          .fontColor(Color.White)
        if (this.liveRoomDataBean.pv > 0) {
          Image($r('app.media.icon_live_player_status_end'))
            .width(12)
            .height(12)
          Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
            .fontSize('11fp')
            .fontWeight(400)
            .fontColor(Color.White)
        }
      }
      .backgroundColor('#4D000000')
      .borderRadius(2)
      .padding(this.liveState == 'running' ? {
        left: 0,
        right: 4,
        top: 0,
        bottom: 0
      } : 4)
    }
  }
}