import { LiveRoomItemBean } from 'wdBean/Index'
import { TabChatComponent } from './TabChatComponent'
import { TabInfoComponent } from './TabInfoComponent'
import { TabLiveComponent } from './TabLiveComponent'

/**
 *  非沉浸式直播 tab 组件
 */
@Component
export struct TabComponent {
  @Prop @Watch('changeToChart') changeToTab: number
  @State fontColor: string = '#999999'
  @State selectedFontColor: string = '#222222'
  @Prop currentIndex: number = 0
  //  private controller: TabsController = new TabsController()
  private swiperController: SwiperController = new SwiperController()
  @Prop tabs: string[] = []
  @Prop lastInputedLiveComment: LiveRoomItemBean // 上次输入的直播间消息
  @Prop lastInputedChatComment: LiveRoomItemBean // 上次输入的大家聊消息

  aboutToAppear(): void {

  }

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

  build() {
    Column() {
      // 页签
      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%')

      Swiper(this.swiperController) {
        ForEach(this.tabs, (item: string, index: number) => {
          if ('简介' === item) {
            TabInfoComponent().backgroundColor('#F5F5F5')
          } else if ('直播间' === item) {
            TabLiveComponent({ lastInputedComment: this.lastInputedLiveComment }).backgroundColor('#F5F5F5')
          } else if ('大家聊' === item) {
            TabChatComponent({
              lastInputedComment: this.lastInputedChatComment,
              index: index,
              parentComponentIndex: this.currentIndex
            }).backgroundColor('#F5F5F5')
          }

        }, (item: string, index: number) => {
          return item + index
        })
      }
      .layoutWeight(1)
      .vertical(false)
      .indicator(false)
      .loop(false)
      .cachedCount(-1)
      .alignSelf(ItemAlign.Start)
      .effectMode(EdgeEffect.None)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .backgroundColor(Color.White)

    }.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)
      Image($r('app.media.icon_tab_indictor_line'))
        .margin({ top: 6 })
        .width(18)
        .height(2)
        .visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)
    }.justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .height('48vp')
    .onClick(() => {
      this.swiperController.changeIndex(index)
      this.currentIndex = index
    })
  }

  aboutToDisappear(): void {
  }
}