@Component
export struct YTTitleBar {
  @Prop headerTitleList: string[]
  listScroller: ListScroller = new ListScroller()
  @Prop @Watch('currentIndexChange') currentIndex: number
  onCurrentIndexChange = (_: number) => {

  }

  currentIndexChange() {
    this.listScroller.scrollToIndex(this.currentIndex, true, ScrollAlign.CENTER)
  }

  build() {
    List({ space: 18, scroller: this.listScroller }) {
      ForEach(this.headerTitleList, (item: string, index) => {
        ListItem() {
          Column() {
            Text(item)
              .height(24)
              .fontColor(this.currentIndex == index ? '#FF171717' : '#B3333333')
              .fontSize(18)
              .fontWeight(this.currentIndex == index ? 700 : 500)
              .onClick(() => {
                this.currentIndex = index
                this.onCurrentIndexChange(this.currentIndex)

              })
            if (this.currentIndex == index) {
              Text()
                .width(14)
                .height(4)
                .borderRadius(12)
                .backgroundColor($r('app.color.main_ac_color_dark'))
            }

          }
          .justifyContent(FlexAlign.SpaceBetween)
        }
      })
    }
    .height(30)
    .width('100%')
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off)
  }
}