Deer/features/feature/src/main/ets/components/DeerSearch.ets

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

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


  @Local searchKey: string = ''

  Touch(){
    yTRouter.router2BookSearchPage()
  }

  onSubmit(){
    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)
          // .maxLength(20)
          .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})

      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()
    })
  }
}