import { DateFormatUtil, WDAliPlayerController } from 'wdPlayer/Index'
import { LiveRoomDataBean } from 'wdBean/Index'


@Component
export struct PlayerVideoControlComponent {
  private playerController?: WDAliPlayerController
  @Consume liveRoomDataBean: LiveRoomDataBean
  @State currentTime: string = ''
  @State totalTime: string = ''
  @State progressVal: number = 0;
  //是否处于播放状态中
  @State isPlayStatus: boolean = true

  aboutToAppear(): void {
    if (this.playerController) {
      //播放进度监听
      this.playerController.onTimeUpdate = (position: number, duration: number) => {
        this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
        this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
        this.progressVal = Math.floor(position * 100 / duration);
      }
    }

  }

  build() {
    Row() {
      this.getBottomUIComponent()
    }
  }

  @Builder
  getBottomUIComponent() {
    Row() {
      this.playOrPauseBtn()
      Text(this.currentTime)
        .fontColor(Color.White)
        .fontWeight(600)
        .fontSize('12fp')
        .margin({
          left: 16
        })

      this.playProgressView()

      Text(this.totalTime)
        .fontColor(Color.White)
        .fontWeight(600)
        .fontSize('12fp')
        .margin({
          right: 16
        })

    }
    .alignItems(VerticalAlign.Center)
    // .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] })
    .width('100%')
    .padding({
      left: 10,
      right: 10,
      top: 15,
      bottom: 15
    })
  }

  @Builder
  playOrPauseBtn() {
    //暂停、播放
    Image(this.isPlayStatus ? $r('app.media.icon_live_player_pause') : $r('app.media.player_play_ic'))
      .width(24)
      .height(24)
      .onClick(() => {
        if (this.isPlayStatus) {
          this.isPlayStatus = false
          this.playerController?.pause()
        } else {
          this.isPlayStatus = true
          this.playerController?.play()
        }
      })
  }

  @Builder
  playProgressView() {
    Slider({
      value: this.progressVal,
      step: 1,
      style: SliderStyle.OutSet
    })
      .blockSize({
        width: 18,
        height: 12
      })
      .trackColor('#4DFFFFFF')
      .selectedColor('#FFED2800')
      .trackThickness(2)
      .blockStyle({
        type: SliderBlockType.IMAGE,
        image: $r('app.media.ic_player_block')
      })
      .blockSize({ width: 18, height: 12 })
      .height(14)
      .layoutWeight(1)
      .margin({
        left: 8,
        right: 8
      })
      .onChange((value: number, mode: SliderChangeMode) => {
        this.playerController?.setSeekTime(value, mode);
      })
  }
}