/**
 * 首页顶部搜索导航栏
 * 竖向滚动实现方案
 * 方案一 使用动画 + 定时器
 * 方案二 使用容器组件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'))
            .objectFit(ImageFit.Cover)
            .height('23lpx')
            .width('23lpx')
            .margin({right:'13lpx'})
            .interpolation(ImageInterpolation.Medium)

          if(this.searchTextData!=null && this.searchTextData.length>0){
            Swiper(this.swiperController) {
              ForEach(this.searchTextData, (item: string, index: number ) => {
                Text(item)
                  .fontWeight('400lpx')
                  .fontSize('25lpx')
                  .fontColor($r('app.color.color_666666'))
                  .lineHeight('35lpx')
                  .textAlign(TextAlign.Start)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Clip})
              })
            }
            .loop(true)
            .autoPlay(true)
            .interval(3000)
            .indicator(false)
            .vertical(true)
          }
        }.width('257lpx')
        .height('61lpx')
        .padding({left:'31lpx'})
        .backgroundImage($r('app.media.background_search'))
        .backgroundImageSize(ImageSize.Cover)
        .alignItems(VerticalAlign.Center)
  }

}