import { VMLogin } from '../vm/VMLogin'
import { hideKeyboard } from '../utils/SysUtils'

/**
 * 登录页面
 */
@Entry
@Component
struct PageLogin {
  // 登录页面状态管理
  @State vm: VMLogin = new VMLogin()

  build() {
    Column() {
      Column() {
        Text("博士安全能量隔离系统").fontSize(24).fontColor("#333333").margin({ top: 60 })
        Text("温州博士安全科技有限公司").fontSize(14).fontColor("#4B5563").margin({ top: 8, bottom: 30 })
      }
      .width("100%").backgroundColor($r("app.color.main")).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

      Scroll() {
        Column() {
          Text("欢迎登录").fontSize(20).fontColor("#333333").fontWeight(FontWeight.Bold).margin({ top: 30 })
          // 切换短信登录或者密码登录
          Row() {
            Text("短信登录")
              .layoutWeight(1)
              .height("100%")
              .textAlign(TextAlign.Center)
              .fontSize(14)
              .fontColor(this.vm.loginType == 0 ? "#FFA500" : "#4B5563")
              .backgroundColor(this.vm.loginType == 0 ? "#FFEDD5" : "#FFFFFF")
              .onClick(() => {
                this.vm.setLoginType(0)
              })
            Text("密码登录")
              .layoutWeight(1)
              .height("100%")
              .textAlign(TextAlign.Center)
              .fontSize(14)
              .fontColor(this.vm.loginType == 1 ? "#FFA500" : "#4B5563")
              .backgroundColor(this.vm.loginType == 1 ? "#FFEDD5" : "#FFFFFF")
              .onClick(() => {
                this.vm.setLoginType(1)
              })
          }.width(335).height(47).border({ width: 1, color: "#D1D5DB", radius: 8 }).margin({ top: 25 })

          // 手机号或账号输入框
          Row() {
            Image(this.vm.loginType == 0 ? $r("app.media.phone") : $r("app.media.user"))
              .width(18)
              .height(18)
              .fillColor("#999999")
            TextInput({ placeholder: this.vm.loginType == 0 ? "请输入手机号" : "请输入用户名" })
              .placeholderColor("#9CA3AF")
              .fontSize(16)
              .backgroundColor(Color.Transparent)
              .type(this.vm.loginType == 0 ? InputType.PhoneNumber : InputType.Email)
              .onChange((value) => {
                this.vm.updateAccount(value)
              })
          }
          .width(335)
          .height(50)
          .border({ width: 1, color: "#D1D5DB", radius: 4 })
          .margin({ top: 25 })
          .padding({ left: 12, right: 12 })

          // 密码或验证码
          Row() {
            Image(this.vm.loginType == 0 ? $r("app.media.code") : $r("app.media.pwd"))
              .width(18)
              .height(18)
              .fillColor("#999999")
            TextInput({ placeholder: this.vm.loginType == 0 ? "请输入验证码" : "请输入密码" })
              .placeholderColor("#9CA3AF")
              .fontSize(16)
              .backgroundColor(Color.Transparent)
              .type(this.vm.loginType == 0 ? InputType.PhoneNumber : InputType.Password)
              .showPasswordIcon(false)
              .onChange((value) => {
                this.vm.updateCode(value)
              })
          }
          .width(335)
          .height(50)
          .border({ width: 1, color: "#D1D5DB", radius: 4 })
          .margin({ top: 20 })
          .padding({ left: 12, right: 12 })

          // 登录按钮
          Button("登 录")
            .width(335)
            .height(52)
            .backgroundColor("#FFA500")
            .margin({ top: 30 })
            .border({ radius: 4 })
            .onClick(() => {
              this.vm.login(() => {
                setTimeout(() => {
                  this.getUIContext().getRouter().replaceUrl({ url: 'pages/PageHome' })
                }, 1500)
              })
            })

          Flex({ wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
            Image($r("app.media.tips")).fillColor("#6B7280").width(12).height(12).margin({ right: 5 })
            Text("工业安全系统，请妥善保管账号信息").fontSize(12).fontColor("#6B7280")
          }.width(335).margin({ top: 16 })

          Stack() {
            Column().width(335).height(1).backgroundColor("#EEEEEE")
            Text("其他登录方式")
              .fontColor("#999999")
              .fontSize(14)
              .backgroundColor(Color.White)
              .padding({ left: 6, right: 6 })

          }.alignContent(Alignment.Center).margin({ top: 20 })

          Row() {
            Stack() {
              Image($r("app.media.fingerprint")).fillColor("#333333")
            }
            .width(50)
            .height(50)
            .padding(12)
            .backgroundColor("#F5F5F5")
            .borderRadius("50%")
            .margin({ left: 10, right: 10 })

            Stack() {
              Image($r("app.media.qrcode")).fillColor("#333333")
            }
            .width(50)
            .height(50)
            .padding(12)
            .backgroundColor("#F5F5F5")
            .borderRadius("50%")
            .margin({ left: 10, right: 10 })

            Stack() {
              Image($r("app.media.bluetooth")).fillColor("#333333")
            }
            .width(50)
            .height(50)
            .padding(14)
            .backgroundColor("#F5F5F5")
            .borderRadius("50%")
            .margin({ left: 10, right: 10 })
          }
          .width("100%")
          .justifyContent(FlexAlign.Center)
          .alignItems(VerticalAlign.Center)
          .margin({ top: 30, bottom: 30 })

          // 分割线
          Column().width(335).height(1).backgroundColor("#EEEEEE")
          Text("LOTO智能锁控·能量安全隔离").fontSize(14).fontColor("#666666").margin({ top: 20 })
          Text("版本 v1.0.0").fontSize(14).fontColor("#666666").margin({ top: 5, bottom: 20 })
        }
        .width("100%").height("100%")
      }.width("100%").height("100%")
    }.onClick(() => {
      console.log("隐藏键盘")
      hideKeyboard()
    })
  }
}