<script setup lang="ts">
import '@/components/css/login.css'
import {reactive, ref} from "vue";
import {ElMessage, type FormInstance, type FormRules} from "element-plus";
import type {InternalRuleItem, Value} from "async-validator";
import request from "@/utils/request";
import router from "@/router";
import {routes} from "vue-router/auto-routes";

interface RegisterData {
  username: string
  password: string
}

const registerData = reactive<RegisterData>({
  username: "",
  password: ""
});

const loginForm = ref<FormInstance>();
const rules = reactive<FormRules<RegisterData>>({
      password: [
        {
          validator: isNotEmpty,
          message:"请输入密码！"
        }
      ],
      username: [
        {
          validator: isNotEmpty,
          message:"请输入账号！"
        }
      ]
    }
)

function isNotEmpty(rule: InternalRuleItem, value: Value, callback: any) {
  if (!value) {
    callback(rule.message);
  } else {
    callback();
  }
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(registerData)
      request.post("/login", {password:registerData.password,username:registerData.username}).then(result =>{
        console.log(result)
        if (result.code === 200) {
          ElMessage.success(result.message)
          router.push("./welcome")
        } else {
          ElMessage.error(result.message)
        }
      })
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>


<template>
  <div class="login">
<!--    <el-form ref="loginForm" :model = "registerData">-->
<!--      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">-->
<!--        <el-input v-model= "registerData.username"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">-->
<!--        <el-input v-model= "registerData.password" type="password"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="submitForm(loginForm)" style="width: 100%;">登录</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
      登录页面
  </div>
</template>

<style scoped>

</style>
