import { router } from '@kit.ArkUI'
import { emitter } from '@kit.BasicServicesKit'
import { BasicConstant } from '../../../../Index'

@Component
export struct HdSearchNav {
  private rightItemAction: (value: string) => void = () => {};
  @StorageProp('topHeight')
  topHeight: number = 0
  @Prop
  bgColor: ResourceStr = $r('app.color.top_bg')
  @Prop
  hasBorder: boolean = false
  @Prop
  leftIcon: ResourceStr = $r('app.media.top_back')
  @Prop
  showRightIcon: boolean = false
  @Prop
  rightIcon: ResourceStr
  @Prop
  showRightText: boolean = false
  @Prop
  rightText: string = ''
  @Prop
  rightTextColor: Color
  @Prop
  rightbackColor: ResourceStr = $r('app.color.main_color')
  @Prop
  isFocus:boolean = false;
  @Prop
  placeholder:string = ''
  @Prop
  isLeftAction: boolean = false
  @State textInputContent:string = ''
  // 添加左侧点击函数
  private leftItemAction:()=> void = () => {};
  build() {
    Row() {
      Row() {
        Image(this.leftIcon)
          .size({ width: 24, height: 24 })
          .onClick(() =>this.isLeftAction? this.leftItemAction(): router.back())
          .fillColor($r('app.color.black'))
      }.size({ width: 40, height: 50 })

      Row(){
        Image($r('app.media.selected_hospital_ws'))
          .width(20).height(20)
          .margin({left:10})
        TextInput({placeholder:this.placeholder})
          .defaultFocus(this.isFocus)
          .fontSize(15)
          .backgroundColor(this.bgColor)
          .height('100%').width('calc(100% - 40vp)')
          .margin({left:5})
          .onChange((value:string)=>{
            this.textInputContent = value;
          })
      }
      .borderWidth(1).borderRadius(5).borderColor('#999999').justifyContent(FlexAlign.Start)
      .width('calc(100% - 100vp)').height(40)

      if (this.showRightIcon) {
        Row() {
          Image(this.rightIcon)
            .size({ width: 24, height: 24 })
            .objectFit(ImageFit.Contain)
            .onClick(()=>this.rightItemAction(this.textInputContent))
        }
        .size({ width: 50, height: 50 }).justifyContent(FlexAlign.End)
      } else  if (this.showRightText) {
        Text(this.rightText)
          .fontSize(16)
          .fontColor(this.rightTextColor)
          .backgroundColor(this.rightbackColor)
          .borderRadius(4)
          .onClick(()=>this.rightItemAction(this.textInputContent))
          .width(50).height(40).margin({left:10})
          .textAlign(TextAlign.Center)
      } else {
        Blank()
          .width(50)
      }
    }
    .padding({ left: 16, right: 16, top: this.topHeight })
    .height(56 + this.topHeight)
    .width('100%')
    .backgroundColor(this.bgColor)
  }
}