import { TabChatComponent } from './TabChatComponent'
import { TabInfoComponent } from './TabInfoComponent'
import { TabLiveComponent } from './TabLiveComponent'

@Component
export struct TabComponent {
  @Prop @Watch('changeToChart') changeToTab: number
  @State fontColor: string = '#999999'
  @State selectedFontColor: string = '#222222'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  @Prop tabs: string[] = []

  aboutToAppear(): void {

  }

  /**
   * 评论切换到大家聊
   */
  changeToChart() {
    const index = this.tabs.findIndex(item => item === '大家聊')
    if (index !== -1) {
      this.controller.changeIndex(index)
    }
  }

  build() {
    Stack({alignContent: Alignment.TopStart}) {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        ForEach(this.tabs, (item: string, index: number) => {
          TabContent() {
            if ('简介' === item) {
              TabInfoComponent()
            } else if ('直播间' === item) {
              TabLiveComponent()
            } else if ('大家聊' === item) {
              TabChatComponent()
            }
          }
          .backgroundColor('#F5F5F5')
        }, (item: string, index: number) => {
          return item + index
        })
      }
      .layoutWeight(1)
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barHeight(48)
      .animationDuration(100)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .backgroundColor(Color.White)

      // 页签
      Row() {
        Scroll() {
          Row({space: '24vp'}) {
            ForEach(this.tabs, (item: string, index: number) => {
              this.tabBuilder(index, item)
            })
          }
          .width('100%')
          .justifyContent(FlexAlign.Center)
        }
        .backgroundColor(Color.White)
        .align(Alignment.Start)
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
      }
      .backgroundColor(Color.White)
      .height('48vp')
      .alignItems(VerticalAlign.Bottom)
      .width('100%')
    }.layoutWeight(1)


  }

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .margin({ top: 6 })
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize('18vp')
        .fontWeight(this.currentIndex === index ? 600 : 400)
      Divider()
        .strokeWidth(2)
        .margin({ top: 6 })
        .width(15)
        .color('#CB0000')
        .visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)
    }.justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .height('48vp')
    .onClick(() => {
      this.controller.changeIndex(index)
      this.currentIndex = index
    })
  }

  aboutToDisappear(): void {
  }
}