import { YTAvoid, yTRouter } from 'basic'
import { LoginCollect } from 'basic/src/main/ets/models/LoginCollect'
import { RegisterOrResetPassComp } from '../views/RegisterOrResetPassView'
import { LoginView } from '../views/LoginView'

// import { OtherLoginMethods } from '../views/OtherLoginMethods'


@Builder
function LoginBuilder() {
  NavDestination() {
    LoginPage()
  }
  .hideTitleBar(true)
}

@Component
struct LoginPage {
  @StorageProp(YTAvoid.SAFE_TOP_KEY) private safeTop: number = 0
  @StorageProp(YTAvoid.SAFE_BOTTOM_KEY) private safeBottom: number = 0
  @State private tabBarIndex: number = 0
  private tabController: TabsController = new TabsController()

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Column() {
        Column() {
          Text('跳过')
            .fontSize(12)
            .fontWeight(400)
            .alignSelf(ItemAlign.End)
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .onClick(() => {
              yTRouter.routerBack()
            })
            .height(24)
            .width(48)
            .borderRadius(12)
            .backgroundColor('#4DFFFFFF')
            .margin({ bottom: 24, right: 28, top: 20 })

          Row() {
            Image($r('app.media.muyubanck')).width(159).height(159).borderRadius(20)
          }.width('100%')
          .justifyContent(FlexAlign.Center)
        }
        .padding({ left: 16, })
        .height(193)
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        Row() {
          Column() {
              Text().width(30).height(8).backgroundColor(this.tabBarIndex==1?'#fbdf71':Color.Transparent).offset({y:35}).borderRadius(3)
            Text('登录')
              .fontSize(20)
              .fontWeight(600)
              .borderRadius({
                topLeft: 12,
                topRight: 12,
                bottomLeft: this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 12 : 0
              })
              // .backgroundColor(this.tabBarIndex == 1 ? Color.White : Color.Transparent)
              .height(48)
              .textAlign(TextAlign.Center)
              .fontColor(this.tabBarIndex == 1 ? Color.White : 'rgba(255, 255, 255, 0.35)')
              .onClick(() => {
                this.tabBarIndex = 1
                this.tabController.changeIndex(1)
              })

          }.justifyContent(FlexAlign.End)
          .alignItems(HorizontalAlign.Center)
          .layoutWeight(1)
          .height(48)


          Column() {
              Text().width(30).height(8).backgroundColor(this.tabBarIndex==0?'#fbdf71':Color.Transparent).offset({y:35}).borderRadius(3)
            Text('注册')
              .fontSize(20)
              .fontWeight(600)
              .fontColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? Color.White : 'rgba(255, 255, 255, 0.35)')
              // .backgroundColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? Color.White : Color.Transparent)
              .textAlign(TextAlign.Center)
              .height(48)
              .borderRadius({ topLeft: 12, topRight: 12, bottomRight: this.tabBarIndex == 1 ? 12 : 0 })
              .onClick(() => {
                this.tabBarIndex = 0
                this.tabController.changeIndex(0)
              })


          }.justifyContent(FlexAlign.End)
          .alignItems(HorizontalAlign.Center)
          .layoutWeight(1)
          .height(48)

        }
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .margin({top:20})

      }
      .padding({ top: this.safeTop })
      // .linearGradient({ angle: 135, colors: [['#CAE2F9', -0.1571], ['#D4D1F4', 0.4709], ['#EDF5FD', 1.1235]] })
      .margin({ bottom: 20 })


      Tabs({ controller: this.tabController }) {
        TabContent() {
          RegisterOrResetPassComp({ loginCollect: new LoginCollect("register") })

        }
        .padding({ left: 20, right: 20 })

        TabContent() {
          LoginView({
            forgetPassClick: () => {
              this.tabBarIndex = 2
              this.tabController.changeIndex(2)
            }
          })
        }
        .padding({ left: 20, right: 20 })

        TabContent() {
          RegisterOrResetPassComp({ loginCollect: new LoginCollect("reset") })
        }
        .padding({ left: 20, right: 20 })
      }
      .scrollable(false)
      .layoutWeight(1)
      .barHeight(0)
      .padding({left:10,right:20})

    }
    .padding({

      bottom: this.safeBottom
    })
    // .backgroundImage(this.tabBarIndex==1?$r('app.media.login'):$r('app.media.register'))
    // .backgroundImageSize({width:'100%',height:'100%'})
    // .backgroundImage($r('app.media.muyubanck'))
    .backgroundColor(Color.Black)
    .height('100%')
  }
}