<template>
  <LoginPage title="LoRaWAN网络控制平台">
    <LoginForm
      :if-err="ifError"
      :err-msg="ErrorMsg"
      v-model:loading="loading"
      :has-captcha="false"
      hasRemember
      v-model:remember="remember"
      :formInfo="{
        username: '1234241',
        password: '123424fe1',
      }"
      @login="loginhandle"
    >
    </LoginForm>
  </LoginPage>
</template>

<script setup>
import { LoginPage, LoginForm } from "enn-login-page-vue3";
import { ref } from "vue";

const loading = ref(false);
const ErrorMsg = ref("");
const ifError = ref(false);
// const uerRegExp = reactive([
//   {
//     required: true,
//     pattern: "^.{5,16}$",
//     message: "请输入5 ~ 16位用户名",
//     trigger: ["blur", "change"],
//   },
// ]);
const remember = ref(false);

// function onClick(validate, form) {
//   validate((valid) => {
//     console.log(valid, form);
//   });
// }
function loginhandle(form) {
  // this.$message.success(`使用${JSON.stringify(form)}进行数据请求`);
  loading.value = true;
  ifError.value = false;
  fetch("/api/login", {
    method: "POST",
    body: JSON.stringify(form),
  })
    .then((res) => {
      if (res.data.code === 200) {
        // ...
        loading.value = false;
      }
    })
    .catch(() => {
      setTimeout(() => {
        ErrorMsg.value = "用户名或密码错误";
        ifError.value = true;
        loading.value = false;
      }, 800);
    });
}
</script>