import { LengthUnit } from "@kit.ArkUI"
import linysSymbol from "./texts/linysSymbol"

@Component
export default struct HeaderSearch {
  @State isShow:boolean = false
  // 是否可以输入内容
  isEnable:boolean = true
  // 当前处于的页面
  @Require @Prop placeHolder:string
  //----搜索栏属性
  @Watch('submit')@State searchValue:string = ''
  // 筛选类型
  @Watch('submit')@State currentType: string = ''
  // 筛选类别
  @Watch('submit')@State currentCategory: string = ''
  // 筛选世代
  @Watch('submit')@State currentGeneration: string = ''
  // 筛选顺序
  @Watch('submit')@State sort: 'seq' | 'rev' = 'seq'
  // 筛选索引
  @Watch('submit')@State currentIndex: string = ''
  // 文本框搜索函数
  search?:(key: string) => void
  @Prop bottomPadding: number
  searchHeight:number = 40
  searchMargin:Padding|Length = {left: 5,right: 5}
  searchPadding:Padding|Length = {left:14,right:14}

  placeholderColor:ResourceColor = '#CC333333'
  placeholderFont:Font = {size:14}
  needLeftBuilder:boolean = true
  //----默认搜索图片属性 在传入leftBuilder或needLeftBuilder=false后无效
  src:ResourceStr = $r('app.media.search')
  imgWidth:Length = 18

  // 添加状态变量来跟踪类型筛选器的重新渲染
  @State filterKey: number = 0

  //----提交函数,回调以回传输入内容
  submit() {
    if (this.search) {
      this.search(this.searchValue)
    }
  }

  @BuilderParam leftBuilder:()=>void = this.defaultLeftBuilder

  aboutToAppear(): void {
    console.info('HeaderSearch aboutToAppear:' + this.bottomPadding)
  }

  build() {
    Row(){
      Row(){
        if (this.needLeftBuilder){
          this.leftBuilder()
        }

        TextInput({text:$$this.searchValue,placeholder: '搜索' + this.placeHolder})
          .backgroundColor(Color.Transparent)
          .height('100%')
          .layoutWeight(1)
          .fontSize(14)
          .borderRadius(0)
          .placeholderFont(this.placeholderFont)
          .placeholderColor(this.placeholderColor)
          .padding(0)
          .enabled(this.isEnable)
          .onSubmit(()=>{
            this.submit()
          })

      }
      .margin(this.searchMargin)
      .padding(this.searchPadding)
      .borderRadius(this.searchHeight/2)
      .height("100%")
      .width("90%")
      .backgroundColor('#FFE7E7E7')

      // Flex()
      //   .width(0)
      //   .height(0)
      //   .borderRadius({ topRight: 30, bottomRight: 30 })
      //   .bindSheet(this.isShow, this.FilterView(), {
      //     title: {
      //       title: '筛选',
      //     },
      //     height: SheetSize.FIT_CONTENT,
      //     showClose: true,
      //     dragBar: false,
      //     blurStyle: BlurStyle.COMPONENT_ULTRA_THIN,
      //     onDisappear: () => {
      //       this.isShow = false
      //     },
      //   })
    }
    .width("100%")
    .height(this.searchHeight)
  }

  @Builder
  defaultLeftBuilder(){
    Image(this.src)
      .fillColor(Color.Black)
      .width(this.imgWidth)
      .aspectRatio(1)
      .margin({right:4})
  }
}