import { DateTimeUtils, Logger } from 'wdKit/Index';
import { WDPlayerController } from 'wdPlayer/Index';

let TAG: string = 'AudioRowComponent'

@Component
export struct AudioRowComponent {
  @State playerController: WDPlayerController = new WDPlayerController();
  @State audioUrl: string = '' //音频路径
  @State duration: number = 0 //时长
  @State outSetValueOne: number = 0 //播放进度
  @State isPlaying: boolean = false

  aboutToAppear(): void {
    this.playerController.firstPlay(this.audioUrl)
    // this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) => {
    //   console.log('现在时间', nowSeconds)
    //   console.log('总时间', totalSeconds)
    //   this.outSetValueOne = nowSeconds
    //   this.duration = totalSeconds
    // }
  }

  build() {
    Row() {
      Image($r('app.media.icon_voice'))
        .width(20)
        .aspectRatio(1)
        .margin({
          left: 8,
          right: 6
        })
        .visibility(this.isPlaying ? Visibility.Visible : Visibility.Hidden)
      Text(`${DateTimeUtils.getFormattedDuration(this.duration)}`)
        .fontColor('#666666')
        .fontWeight(400)
        .fontSize('14fp')
    }
    .backgroundColor(Color.White)
    .height(36)
    .borderRadius(4)
    .margin({ top: 8, right: 16 })
    .width('100%')
    .onClick(() => {
      this.isPlaying = !this.isPlaying
      this.playerController?.switchPlayOrPause()
    })
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
      Logger.debug(TAG, `当前屏幕可见区域大小： currentRatio:' +${currentRatio}`)
      // if (isVisible && currentRatio >= 1.0) {
      //   Logger.debug(TAG, `播放器-播放. currentRatio:' +${currentRatio}`)
      //   this.playerController?.play()
      // }

      if (!isVisible && currentRatio <= 0.0) {
        Logger.debug(TAG, `播放器-暂停. currentRatio:' +${currentRatio}`)
        this.playerController?.pause()
      }
    })
  }

  aboutToDisappear(): void {
    this.playerController?.release()
  }
}