import { DateTimeUtils } from 'wdKit/Index'

/**
 * 这里是样式卡中，右下角显示的音视频信息
 * 目前已知：
 * 音频： 音频图标+时长
 * 视频：点播图标+时长；直播图标+'直播中'
 */
@Preview
@Component
export struct CardMediaInfo {
  @State duration: number = 0 // 如果有duraion，代表点播，显示时长；如果不传或者传0，显示直播中
  @State mediaType: string = 'video' // audio: 音频；video: 视频

  build() {
    Row() {
      if (this.mediaType === 'audio') {
        Image($r('app.media.broadcast_listen'))
          .height(14)
          .borderRadius($r('app.float.button_border_radius'))
      } else {
        Image(this.duration ? $r('app.media.videoTypeIcon') : $r('app.media.icon_live'))
          .width(22)
          .height(18)
          .borderRadius($r('app.float.button_border_radius'))
      }

      Text(this.duration ? DateTimeUtils.getFormattedDuration(this.duration * 1000) : '直播中')
        .fontColor($r('app.color.color_fff'))
        .fontSize($r('app.float.font_size_12'))
        .width(40)
        .height(18)
        .textAlign(TextAlign.Center)
        .margin({ left: -3 })
    }
    .backgroundColor(this.mediaType === 'audio' ? '': '#4d000000')
    .borderRadius($r('app.float.button_border_radius'))
    .margin(6)
  }
}