import router from '@ohos.router'

@Component
export struct CustomTitleUI {
  imgBack:boolean = true
  titleName:ResourceStr = "默认标题"
  @Prop percent:number = 1
  isShowBottomLine:boolean = false

  build() {
    Column(){
      RelativeContainer() {
        //标题栏目
        if(this.imgBack){
          Image($r('app.media.back_icon'))
            .width(24)
            .height(24)
            .objectFit(ImageFit.Auto)
            .interpolation(ImageInterpolation.High)
            .id("back_icon")
            .alignRules({
              center: {anchor: "__container__", align: VerticalAlign.Center},
              left: {anchor: "__container__", align: HorizontalAlign.Start}
            })
            .margin({left: 16})
            .onClick(()=>{
              router.back()
            })
        }

        Text(this.titleName)
          .maxLines(1)
          .id("title")
          .fontFamily('PingFang SC-Regular')
          .fontSize(18)
          .fontWeight(400)
          .fontColor($r('app.color.color_222222'))
          .lineHeight(26)
          .alignRules({
            center: {anchor: "__container__", align: VerticalAlign.Center},
            middle: {anchor: "__container__", align: HorizontalAlign.Center}
          })

      }
      .height(44)
      .width('100%')
      .backgroundColor($r('app.color.white'))

      if(this.isShowBottomLine){
        Text().backgroundColor($r('app.color.color_EDEDED'))
          .width('100%')
          .height(1)
      }
    }
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}