const TAG = "SearchResultComponent"
/**
 * 搜索结果
 * 搜索结果为null（空布局 + 为你推荐）
 */
@Component
export struct SearchResultComponent{
  @Prop count:string[] = []
  @Prop searchText: string

  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  fontColor: string = '#999999'
  selectedFontColor: string = '#000000'

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.count, (item: string, index: number ) => {
          TabContent(){
            Text(item)
          }.tabBar(this.TabBuilder(index,item))
        }, (item: string, index: number) => index.toString())
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth('100%')
      .barHeight('84lpx')
      .animationDuration(0)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
      .layoutWeight(1)
    }.width('100%')
    .margin({ top: '12lpx' })
  }

  @Builder TabBuilder(index: number, item: string) {
    Stack(){
      Text(item)
        .height('38lpx')
        .fontSize('33lpx')
        .fontWeight(this.currentIndex === index ? 600 : 400)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .lineHeight('38lpx')

      if(this.currentIndex === index){
        Divider()
          .width('31lpx')
          .height('4lpx')
          .color('#ED2800')
          .strokeWidth('4lpx')
          .margin({top:'50lpx'})
          .id("divTag")
      }
    }.onClick(()=>{
      this.currentIndex = index
      this.controller.changeIndex(this.currentIndex)
    })
    .height('100%')
    .margin({right:'9lpx'})
    .padding({left:'31lpx',right:index === this.count.length-1?"31lpx":"0lpx"})
  }
}