import { router } from '@kit.ArkUI'

@Builder
function defaultBuilder(): void {

}

@Component
export struct HdNav {
  @StorageProp('topHeight')
  topHeight: number = 0
  @Prop
  title: string = ''
  @Prop
  textColor: ResourceStr = $r('app.color.top_title')
  @Prop
  bgColor: ResourceStr = $r('app.color.top_bg')
  @Prop
  hasBorder: boolean = false
  @Prop
  leftIcon: ResourceStr = $r('app.media.top_back')
  @Prop
  rightIcon: ResourceStr = $r('sys.media.ohos_ic_public_more')
  @Prop
  showRightIcon: boolean = true
  @Prop
  showLeftIcon: boolean = true
  @Prop
  showRightText: boolean = false
  @Prop
  rightText: string = ''
  @Prop
  rightBackColor:ResourceColor = this.bgColor
  @Prop
  rightTextColor:ResourceColor = this.textColor
  @BuilderParam
  titleBuilder: () => void = defaultBuilder
  @BuilderParam
  menuBuilder: () => void = defaultBuilder
  @Prop
  isLeftAction: boolean = false
  // 添加右侧点击函数
  private rightItemAction:()=> void = () => {};
  // 添加左侧点击函数
  private leftItemAction:()=> void = () => {};

  build() {
    Row() {
      if (this.showLeftIcon) {
        Row()
        {
          Image(this.leftIcon)
            .size({ width: 24, height: 24 })
            .onClick(() => this.isLeftAction? this.leftItemAction():router.back())
            .fillColor($r('app.color.black'))
        }
        .size({ width: 50, height: 50 })


      } else {
        Blank()
          .width(50)
      }
      Row() {
        if (this.title) {
          Text(this.title)
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor(this.textColor)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        } else if (this.titleBuilder) {
          this.titleBuilder()
        }
      }
      .height(56)
      .width(150)
      .layoutWeight(1)

      if (this.showRightIcon) {
        Row()
        {
          Image(this.rightIcon)
            .size({ width: 24, height: 24 })
            .objectFit(ImageFit.Contain)
            .bindMenu(this.menuBuilder)
            .onClick(()=>this.rightItemAction())
        }
        .size({ width: 50, height: 50 }).justifyContent(FlexAlign.End)

      } else  if (this.showRightText) {
        Text(this.rightText)
          .maxFontSize(16)
          .minFontSize(6)
          .maxLines(1)
          .fontColor(this.rightTextColor)
          .onClick(()=>this.rightItemAction())
          .width(50)
          .textAlign(TextAlign.Center)
          .borderRadius(5)
          .backgroundColor(this.rightBackColor)
          .height(35)
          // .margin({right:10})
      } else {
        Blank()
          .width(50)
      }
    }
    .padding({ left: 16, right: 16, top: this.topHeight })
    .height(56 + this.topHeight)
    .width('100%')
    .backgroundColor(this.bgColor)
  }
}