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

@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()
  private linearInfo1: LinearGradientOptions = {
    colors: [ ['#F7FCF3', 0.1], ['#DEFE9E', 1] ],
    angle: 90
  }

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Column() {
        Column() {
          Text('跳过')
            .fontSize(12)
            .fontWeight(400)
            .alignSelf(ItemAlign.End)
            .textAlign(TextAlign.Center)
            .fontColor('#3E5100')
            .onClick(() => {
              yTRouter.routerBack()
            })
            .height(24)
            .width(48)
            .borderRadius(12)
            .backgroundColor('#4DFFFFFF')
            .margin({ bottom: 24, right: 28, top: 20 })
          Text('你好，\n欢迎来到盒小仓')
            .lineHeight(40)
            .fontSize(28)
            .fontWeight(600)
            .fontColor('#0E2E1A')
        }
        .padding({ left: 16, })
        .height(193)
        .width('100%')
        .alignItems(HorizontalAlign.Start)
      }
      .padding({ top: this.safeTop })
      .backgroundImage($r('app.media.loginPage_Bg'))
      .backgroundImageSize(ImageSize.Cover)

      Column(){
        Row() {
          Text('注册')
            .fontSize(16)
            .fontWeight(600)
            .layoutWeight(1)
            .fontColor(this.tabBarIndex == 0 ? '#FF141111' : '#80141111')
            .backgroundColor(this.tabBarIndex == 0 || this.tabBarIndex == 2 ? 'rgba(255,255,255,0.5)' : Color.Transparent)
            // .linearGradient(this.tabBarIndex == 0 ? this.linearInfo1 : this.linearInfo2)
            .textAlign(TextAlign.Center)
            .height(48)
            .borderRadius({ topLeft: 12, topRight: 12, bottomRight: this.tabBarIndex == 1 ? 12 : 0 })
            .onClick(() => {
              this.tabBarIndex = 0
              this.tabController.changeIndex(0)
            })

          Text('登录')
            .fontSize(16)
            .fontWeight(600)
            .borderRadius({
              topLeft: 12,
              topRight: 12,
              bottomLeft: this.tabBarIndex == 0 ? 12 : 0
            })
            .backgroundColor(this.tabBarIndex == 1 ? 'rgba(255,255,255,0.5)' : Color.Transparent)
            .layoutWeight(1)
            .height(48)
            .textAlign(TextAlign.Center)
            .fontColor(this.tabBarIndex == 1 || this.tabBarIndex == 2 ? '#FF141111' : '#80141111')
            // .linearGradient(this.tabBarIndex == 1 || this.tabBarIndex == 2 ? this.linearInfo1 : this.linearInfo2)
            .onClick(() => {
              this.tabBarIndex = 1
              this.tabController.changeIndex(1)
            })

        }
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .linearGradient(this.linearInfo1)

        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({top: 20})
      }
      // .backgroundImage(this.tabBarIndex == 0 ? $r('app.media.loginPage_Bg_left') : $r('app.media.loginPage_Bg_right'))
      // .backgroundImageSize(ImageSize.Contain)
    }

    .padding({

      bottom: this.safeBottom
    })
    .height('100%')
  }
}