import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
import { NumberFormatterUtils } from 'wdKit/Index'

@Component
export struct PlayerTitleComponent {
  @Consume liveDetailsBean: LiveDetailsBean
  @Consume liveRoomDataBean: LiveRoomDataBean

  build() {
    Column() {
      Row() {
        Image($r('app.media.icon_arrow_left_white'))
          .width(24)
          .aspectRatio(1)
          .visibility(Visibility.None)
          .margin({
            right: 10
          })
        if (this.liveDetailsBean.liveInfo?.liveState != 'wait') {
          Text(this.liveDetailsBean.newsTitle)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize('16fp')
            .fontWeight(500)
            .fontColor(Color.White)
            .textAlign(TextAlign.Start)
            .layoutWeight(1)
        } else {
          Blank()
        }
        Image($r('app.media.icon_share'))
          .width(24)
          .aspectRatio(1)
          .visibility(Visibility.None)
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
      .margin({
        bottom: 10
      })

      this.getLiveStatusView()
    }.width('100%')
    .padding({
      top: 20,
      bottom: 6,
      left: 10,
      right: 10
    })
    .alignItems(HorizontalAlign.Start)
    .visibility(Visibility.Visible)
  }

  @Builder
  getLiveStatusView() {
    Row() {
      Image(this.liveDetailsBean.rmhInfo.rmhHeadUrl)
        .width(22)
        .height(18)
      Text(this.liveDetailsBean.rmhInfo.rmhName)
        .fontSize('11fp')
        .fontWeight(400)
        .fontColor(Color.White)
    }
    .backgroundColor('#4D000000')
    .padding({
      top: 1,
      right: 4,
      bottom: 1
    })


    // 直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
    // 预约
    if (this.liveDetailsBean.liveInfo?.liveState == 'wait') {
      Row() {
        Image($r('app.media.icon_live_status_wait'))
          .width(22)
          .height(18)
        Text('预约')
          .fontSize('11fp')
          .fontWeight(400)
          .fontColor(Color.White)
      }
      .backgroundColor('#4D000000')
      .padding({
        top: 1,
        right: 4,
        bottom: 1
      })
    }
    // 直播中
    else if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
      Row() {
        Image($r('app.media.icon_live_status_running'))
          .width(22)
          .height(18)
        Text('直播中')
          .fontSize('11fp')
          .fontWeight(400)
          .fontColor(Color.White)
        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')
      .padding({
        top: 1,
        right: 4,
        bottom: 1
      })
    }
    //回看
    else if (this.liveDetailsBean.liveInfo?.liveState == 'end') {
      Row() {
        Text('回看')
          .fontSize('11fp')
          .fontWeight(400)
          .fontColor(Color.White)
        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')
      .padding({
        left: 4,
        top: 1,
        right: 4,
        bottom: 1
      })
    }
  }
}