import { ContentDetailDTO } from 'wdBean/Index';
import { AliPlayerRenderView,
  AliScaleMode,
  PlayerConstants, WDAliPlayerController, WDPlayerRenderVLiveView } from 'wdPlayer/Index';
import { ParamType, TrackConstants } from 'wdTracking/Index';
import { PictureLoading } from './PictureLoading';

const TAG = 'PlayerComponent'

@Component
export struct PlayerComponent {
  private playerController?: WDAliPlayerController
  @Consume @Watch('updateData') contentDetailData: ContentDetailDTO
  @Consume @Watch('pageShowChange') pageShow: number
  @Consume @Watch('pageHideChange') pageHide: number
  @Consume isShowControl: boolean
  @Consume liveState: string
  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State imgUrl: string = ''
  @State isWait: boolean = false
  // 0-横屏流画面,1-竖屏幕流画面
  @State liveStreamType: number | null = -1
  @State playUrl: string = ''
  pageParam: ParamType = {}
  // 播放失败
  @Link isPlayerError: boolean
  @Link isCanplay: boolean
  @State isLarge:boolean = false
  pageShowChange() {
    this.playerController?.play()
  }

  pageHideChange() {
    this.playerController?.pause()
  }

   aboutToAppear(){
    if (this.playerController) {
      this.playerController.onCanplay = () => {
        this.isCanplay = true
        this.playerController?.play()
      }
      this.playerController.onStatusChange = (status: number) => {
        if (status === PlayerConstants.STATUS_ERROR) {
          this.isPlayerError = true
          this.isCanplay = true
        } else if (status === PlayerConstants.STATUS_COMPLETION) {
          // 播放完成

        } else {
          //this.isPlayerError = false
        }

      }
      this.playerController.onVideoSizePlayerComponentBack = (width: number, height: number) => {
        if(width>height){
          this.isLarge = false
          if(width > 2){
            this.liveStreamType = 0
          }
        }else{
          this.isLarge = true
          this.playerController?.setScaleMode(AliScaleMode.SCALE_ASPECT_FILL)
        }
      }
    }


    setTimeout(() => {
      this.updateData()
    }, 10)


  }

  async aboutToDisappear(): Promise<void> {

    await this.playerController?.pause()
    await this.playerController?.stop()
    await this.playerController?.release()

  }

  updateData() {
    //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
    if (this.contentDetailData.fullColumnImgUrls && this.contentDetailData.fullColumnImgUrls.length > 0) {
      this.imgUrl = this.contentDetailData.fullColumnImgUrls[0].url
    }
    this.isWait = this.contentDetailData?.liveInfo?.liveState == 'wait'
    if (this.contentDetailData.liveInfo && this.contentDetailData.liveInfo.vlive.length > 0) {
      let playUrl = ''
      let liveStreamType: number | null = null
      if (this.contentDetailData.liveInfo.liveState == 'running') {
        playUrl = this.contentDetailData.liveInfo.vlive[0].liveUrl
        liveStreamType = this.contentDetailData.liveInfo.vlive[0].liveStreamType
      } else if (this.contentDetailData.liveInfo.liveState == 'end') {
        playUrl = this.contentDetailData.liveInfo.vlive[0].replayUri
        liveStreamType = this.contentDetailData.liveInfo.vlive[0].liveStreamType
      }

      this.liveStreamType = liveStreamType
      this.playUrl = playUrl
    }
  }

  build() {
    Stack() {
      // TODO:判断横竖屏，liveStreamType=1竖屏铺满屏幕,裁剪不拉伸，liveStreamType=0横屏正常展示
      if (this.liveStreamType == null || this.liveStreamType == 1) {
        WDPlayerRenderVLiveView({
          playerController: this.playerController,
          onLoad: () => {
            console.error("XXXXZZZZ", '-------------1--------' + this.playUrl)
            this.isCanplay = true
            this.contentTrackingDict()
            this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam);
          }
        })
      } else if (this.liveStreamType == 0) {
        AliPlayerRenderView({
          playerController: this.playerController,
          onLoad: () => {
            this.isCanplay = true
            this.contentTrackingDict()
            this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam);
          }
        }).margin({ top: this.isLarge?0:195 }).height(this.isLarge?'100%': 211)
      }

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


    }
    .height('100%')
    .width('100%')
    .align(Alignment.Top)
    .alignContent(Alignment.Top)

  }

  contentTrackingDict() {
    this.pageParam = {
      'contentType': `${this.contentDetailData.newsType}`,
      'contentId': `${this.contentDetailData.newsId}`,
      'contentName': `${this.contentDetailData.newsTitle || ''}`,
    }
  }
}