import router from '@ohos.router';
@Component
export struct NavigationBar {
  @Prop notificationNumber: number = 0;
  build() {
    Row() {
      // 带数字标记的通知图标
      Image($r('app.media.navigation_statistics'))
        .width($r('app.float.virtualSize_23'))
        .height($r('app.float.virtualSize_23'))
        .fillColor($r('app.color.FFFFFF'))
      Badge({
        count: this.notificationNumber, // 动态传入的通知数量
        position: BadgePosition.RightTop, // 右上角显示
        style: {
          badgeColor: $r('app.color.FF453A'), // 红色背景（与图片一致）
          badgeSize: 20,                      // 圆形大小
        }
      }) {
        Image($r('app.media.navigation_notifications')) // 通知图标
          .width($r('app.float.virtualSize_23'))
          .height($r('app.float.virtualSize_23'))
          .fillColor($r('app.color.FFFFFF'))
      }
      Image($r('app.media.navigation_logs'))
        .width($r('app.float.virtualSize_23'))
        .height($r('app.float.virtualSize_23'))
        .fillColor($r('app.color.FFFFFF'))
      Image($r('app.media.navigation_rgv_control'))
        .width($r('app.float.virtualSize_23'))
        .height($r('app.float.virtualSize_23'))
        .fillColor($r('app.color.FFFFFF'))
        .onClick(()=>{
          router.pushUrl({
            url: 'pages/RgvControl'
          })
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .alignItems(VerticalAlign.Bottom)
  }
}