import { BasicType, YTAvoid, yTRouter, yTToast} from 'basic';
import { Mine } from 'user/src/main/ets/views/Mine';
import { FragranceView, MainView} from 'feature';

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  @StorageProp(YTAvoid.SAFE_TOP_KEY) bottom: number = 0
  //tabs展示内容
  contentList: BasicType<undefined>[] = [
    {
      text: '工具',
      src: $r('app.media.homeuns'),
      acSrc: $r('app.media.homes')
    },
    {
      text: '电香',
      src: $r('app.media.homeuns'),
      acSrc: $r('app.media.homes')
    },
    {
      text: '我的',
      src: $r('app.media.myuns'),
      acSrc: $r('app.media.mys')
    }
  ]
  tabsController: TabsController = new TabsController()

  aboutToAppear(): void {
    yTToast.init({
      context: this.getUIContext(),
      options: { alignment: DialogAlignment.Center, maskColor: '#80000000' }
    })
  }
  build() {
    Navigation(yTRouter) {
      Column() {
        Tabs({ controller: this.tabsController }) {
          ForEach(this.contentList, (_: BasicType<undefined>, index) => {
            TabContent() {
              if (index == 0) {
                //放对应组件
                MainView()
              } else if(index==1){
                FragranceView()
              }else {
                Mine()
              }
            }
          })
        }
        .onChange((index) => {
          this.currentIndex = index
        })
        .barHeight(0)
        .layoutWeight(1)

        Row() {
          ForEach(this.contentList, (item: BasicType<undefined>, index) => {
            this.barBuilder((() => {
              item.index = index
              return item
            })())
          })
        }
        .justifyContent(FlexAlign.SpaceAround)
        .width('100%')
        .padding({ bottom: this.bottom })
        .shadow({ offsetY: -13, radius: 16, color: '#0A000000' })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.White)

    }
    .mode(NavigationMode.Stack)
    .hideToolBar(true)
  }

  @Builder
  barBuilder(item: BasicType<undefined>) {
    Column() {
      Image(this.currentIndex == item.index ? item.acSrc : item.src)
        .width(24)
      Text(item.text)
        .fontSize($r('[basic].float.page_text_font_size_10'))
        .lineHeight(16)
        .fontColor(this.currentIndex == item.index ? $r('[basic].color.main_ac_color_dark') :
        $r('[basic].color.main_na_color'))

    }
    .margin({ top: 5 })
    .onClick(() => {
      this.currentIndex = item.index!
      this.tabsController.changeIndex(this.currentIndex)
    })
  }
}