import { VMHome } from '../vm/VMHome'
import { TabHome } from './PageHomeComponents/TabHome'
import { TabJobs } from './PageHomeComponents/TabJobs'
import { TabMessage } from './PageHomeComponents/TabMessage'
import { TabSettings } from './PageHomeComponents/TabSettings'

@Entry
@Component
struct PageHome {
  @State vm: VMHome = new VMHome()

  build() {
    Tabs({ barPosition: BarPosition.End, index: this.vm.tabIndex }) {
      TabContent() {
        TabHome({ vmHome: this.vm })
      }
      .tabBar(this.TabBuilder(0, "首页", $r('app.media.home')))
      .clip(false)

      TabContent() {
        TabJobs()
      }
      .tabBar(this.TabBuilder(1, "作业", $r('app.media.jobs')))
      .clip(false)

      TabContent() {
        TabMessage()
      }
      .tabBar(this.TabBuilder(2, "消息", $r('app.media.message')))
      .clip(false)

      TabContent() {
        TabSettings()
      }
      .tabBar(this.TabBuilder(3, "设置", $r("app.media.settings")))
      .clip(false)
    }
    .width('100%')
    .height('100%')
    .barMode(BarMode.Fixed)
    .divider({ color: "#EEEEEE", strokeWidth: 1 })
    .scrollable(false)
    .animationMode(AnimationMode.NO_ANIMATION)
    .onChange((index: number) => {
      // 该方法实现双向绑定，以处理非用户点击导致的导航栏变化
      this.vm.updateTabIndex(index)
    })
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

  }

  @Builder
  TabBuilder(id: number, text: string, icon: Resource) {
    Stack() {
      Column() {
        Image(icon).width(20).height(20).fillColor(id == this.vm.tabIndex ? "#1E90FF" : "#333333")
        Text(text)
          .fontSize(12)
          .fontColor(id == this.vm.tabIndex ? "#1E90FF" : "#333333")
          .margin({ top: 5 })
      }.width("100%").height("100%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)

      Text("99")
        .backgroundColor("#FF4500")
        .borderRadius("50%")
        .fontColor(Color.White)
        .fontSize(10)
        .position({ top: 2, left: "55%" })
        .constraintSize({ minWidth: 15, minHeight: 15 })
        .textAlign(TextAlign.Center)
        .visibility(Visibility.Hidden)
    }.width("100%").height(56)
  }
}