/**
 * 首页顶部搜索导航栏
 * 竖向滚动实现方案
 * 方案一 使用动画 + 定时器
 * 方案二 使用容器组件Swiper（当前）
 */
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'

const TAG = "FirstTabTopSearchComponent"
@Component
export struct FirstTabTopSearchComponent{
  @State searchTextData :string[] = []
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear(){
    this.getSearchHint()
  }

  getSearchHint(){
    SearcherAboutDataModel.getSearchHintData(getContext(this)).then((value)=>{
      if(value!=null){
        this.searchTextData = value
      }
    }).catch((err:Error)=>{
      console.log(TAG,JSON.stringify(err))
    })
  }

  build(){
        Row(){
          Image($r('app.media.icon_search'))
            .width(18)
            .height(18)

          if(this.searchTextData!=null && this.searchTextData.length>0){
            Swiper(this.swiperController) {
              ForEach(this.searchTextData, (item: string, index: number ) => {
                Text(item)
                  .fontWeight(400)
                  .fontColor($r('app.color.color_B0B0B0'))
                  .fontSize($r('app.float.font_size_13'))
                  .textAlign(TextAlign.Start)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Clip})
              })
            }
            .loop(true)
            .autoPlay(true)
            .interval(3000)
            .indicator(false)
            .vertical(true)
            .height(30)
          }
        }.height(30)
        .width(124)
        .padding({left:15})
        .backgroundImage($r('app.media.background_search'))
        .backgroundImageSize(ImageSize.Cover)
  }

}