import { YTButton, yTRouter } from "basic"
import testsuite from "../../../ohosTest/ets/test/List.test"
import { CustomTextStyle } from "../style/CustomTextStyle"

@ComponentV2
export struct DeerSearch {
  @Param enable: boolean = true
  @Param showSearchButton: boolean = true

  @Event onSearch: (text: string) => void

  @Local searchKey: string = ''

  Touch(){
    yTRouter.router2BookSearchPage()
  }

  onSubmit(){
    if(this.onSearch) {
      this.onSearch(this.searchKey)
    }
    this.searchKey = ''
  }

  build() {
    Row({space: 7}) {
      Row({space: 12.5}){
        Image($r('[basic].media.icon_Search'))
          .width(16)
          .aspectRatio(1)
          .fillColor('#FECF2F')

        TextInput({text: $$this.searchKey, placeholder: '搜索图书/书单'})
          .padding(0)
          .fontSize(12)
          .fontWeight(400)
          .layoutWeight(1)
          .borderRadius(0)
          .border({ width: 0 })
          .enabled(this.enable)
          .onSubmit(()=>{ this.onSubmit() })
          .backgroundColor(Color.Transparent)
          .placeholderFont({size: 12, weight: 400})
          .placeholderColor(this.enable ? '#B5B8BC' : Color.Black)
      }
      .borderRadius(31)
      .layoutWeight(1)
      .backgroundColor(Color.White)
      .border({width: 2, color: '#000000'})
      .padding({left: 13, right: 13, top: 3, bottom: 3})

      if(this.showSearchButton){
        Text('搜索')
          .borderRadius(31)
          .backgroundColor('#FECF2F')
          .border({ width: 2, color: '#000000' })
          .padding({left: 18, right: 18, top: 9, bottom: 9})
          .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
          .onClick(() => {
            if(this.enable) this.onSubmit()
            else this.Touch()
          })
      }
    }
    .width("100%")
    .onClick(() => {
      if(!this.enable) this.Touch()
    })
  }
}