import { Main } from '../views/Main'
import { DueTime } from '../views/DueTime'
import { Note } from '../views/Note';
import { Time } from '../views/Time';
import { About } from '../views/About';
import { YTAvoid } from '../utils/YTAvoid';

@Entry
@Component

struct Index {
  @State currentIndex: number = 0
  @StorageProp(YTAvoid.SAFE_TOP_KEY)
  top:number=0
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY)
  bottom:number=0

  private controller: TabsController = new TabsController();

  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#756860' : '#A2A4B1')
        .fontSize(12)
    }
    .width('100%')
    .height(50)
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.controller.changeIndex(targetIndex)
    })
  }
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          if(this.currentIndex==0) {

            Main()
          }
        }.tabBar(this.TabBuilder("清单", 0, $r('app.media.c_book'), $r('app.media.book')))
        TabContent() {
          if(this.currentIndex==1) {

            DueTime()
          }
        }.tabBar(this.TabBuilder("截止时间", 1, $r('app.media.timeselect'), $r('app.media.timeunselect')))
        TabContent() {
          if(this.currentIndex==2) {
            Note()
          }
        }.tabBar(this.TabBuilder("笔记", 2, $r('app.media.notesel'), $r('app.media.note')))
        TabContent() {
          if(this.currentIndex==3) {
            Time()
          }
        }.tabBar(this.TabBuilder("时间轴", 3, $r('app.media.timeselect'), $r('app.media.timeunselect')))
        TabContent() {
          if(this.currentIndex==4) {
            About()
          }
        }.tabBar(this.TabBuilder("关于", 4, $r('app.media.c_my'), $r('app.media.my')))
      }.onChange((index: number) => {
        this.currentIndex = index
      })
      .scrollable(false)
    }.width('100%')
    .height('100%')
    .backgroundImage($r('app.media.backimg'))
    .backgroundImageSize({width:'100%',height:'100%'})
    .backgroundColor('#fff')
    .padding({bottom: this.bottom,top:this.top})

  }

}