import { TitleBar } from '../../../view/TitleBar'
import { QrcodeLoginViewModel } from '../../../viewModel/QrcodeLoginViewModel'

@Entry
@ComponentV2
struct QrcodeLoginPage {
  viewModel: QrcodeLoginViewModel = new QrcodeLoginViewModel(this.getUIContext())

  code: string = ''

  @Monitor('viewModel.loginResult')
  onLogin() {
    this.getUIContext().getRouter().back()
  }

  aboutToAppear(): void {
    this.initParams()
  }

  initParams() {
    const params = this.getUIContext().getRouter().getParams() as Record<string, Object>;
    if (params) {
      this.code = params.code  as string
    }
  }

  onBackPress(): boolean | void {
    return true
  }

  build() {
    Column() {
      TitleBar({ title: '登录确认', isDark: false})

      Column() {
        Image($r('app.media.ic_qrcode_login_computer_black'))
          .width(110)
          .height(110)
          .margin({ top: 100 })

        Text() {
          Span('登录 ')
          Span($r('app.string.app_name')).fontColor($r("app.color.color_466afd"))
          Span(' 网页端')
        }
        .fontSize(20)
        .fontColor($r('app.color.color_1a1a1a'))
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })

        Button('登录')
          .width(184)
          .height(48)
          .linearGradient({
            colors: [['#F62C6C', 0.0], ['#FC4F54', 1.0]],
            direction: GradientDirection.Right
          })
          .borderRadius(6)
          .margin({ top: 90 })
          .onClick(() => {
            this.viewModel.login(this.code)
          })

        Text('取消登录').fontColor('#95979E')
          .fontSize(14)
          .margin({ top: 20 })
          .onClick(() => {
            this.getUIContext().getRouter().back()
          })
      }
      .width('90%')
      .layoutWeight(1)
      .margin(16)
      .borderRadius(16)
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.color_ededed'))
  }
}