import { EmitterKeyCollection, UserInfo, userInfo, yTRouter } from "basic"
import { emitter } from "@kit.BasicServicesKit"
import { AppStorageV2 } from "@kit.ArkUI"

@ComponentV2
export struct ytBuildComp {
  // 主体内容
  @BuilderParam main: () => void
  // 是否登录
  @Local isLogin: boolean = true
  // 用户信息
  @Local userInfo: UserInfo = AppStorageV2.connect<UserInfo>(UserInfo, 'UserInfo', () => userInfo)!
  // 是否校验登录
  @Local checkLogin: boolean = true

  toLogin = () => {
    yTRouter.router2LoginPage(false)
  }

  LoginStatusChange(){
    this.isLogin = this.userInfo.checkLogin()
  }

  aboutToAppear(): void {
    emitter.on(EmitterKeyCollection.LOGIN, () => {
      this.LoginStatusChange()
    })
    emitter.on(EmitterKeyCollection.LOGOUT, () => {
      this.LoginStatusChange()
    })
    // 防止横幅闪烁
    setTimeout(() => {
      this.LoginStatusChange()
    }, 300)
  }

  build() {
    RelativeContainer(){
      Column(){
        this.main()
      }
      .width("100%")
      .height("100%")
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top},
        left: { anchor: "__container__", align: HorizontalAlign.Start},
      })

      if(!this.isLogin && this.checkLogin){
        Column(){
          Row() {
            Text("登录使用更多功能")
              .fontSize(18)
              .fontWeight(400)
              .fontColor(Color.Black)

            Text("马上登录")
              .fontSize(14)
              .fontWeight(500)
              .borderRadius(10)
              .onClick(this.toLogin)
              .fontColor(Color.White)
              .backgroundColor('#95C50A')
              .padding({ top: 5, bottom: 5, left: 10, right: 10 })
          }
          .width("100%")
          .borderRadius(8)
          .alignItems(VerticalAlign.Center)
          .backgroundColor('rgba(255, 255, 255, 1)')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({ left: 20, right: 20, top:  18, bottom: 18 })
        }
        .width('100%')
        .height('100%')
        .padding({left: 20, right: 20, bottom: 10})
        .justifyContent(FlexAlign.End)
        .alignItems(HorizontalAlign.Center)
        .backgroundColor('rgba(0, 0, 0, 0.2)')
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top},
          left: { anchor: "__container__", align: HorizontalAlign.Start},
        })
      }
    }
    .width("100%")
    .height("100%")
  }
}