<template>
<div class="container">
   <div class="loginBox">
     <div class="ms-login">管理系统平台</div>
   <el-form
    label-width="100px"
    :model="param"
    style="max-width: 460px"
    class="loginForm"
    :rules="rules" ref="loginRef"
   >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="param.username" placeholder="请输入用户名"/>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="param.password" placeholder="请输入密码" />
    </el-form-item>
    <el-form-item class="loginBtn">
      <el-button type="primary" style="margin: 10px" @click="submitForm(loginRef)">登录</el-button>
      <el-button type="info" style="margin: 10px">取消</el-button>
    </el-form-item>


  </el-form>


   </div>
</div>
</template>

<script>
import { reactive, ref } from 'vue'
import {Login} from "../../api/user";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
export default {
  name: "Login",
  setup(){
    const param = reactive({
          username: "李星云2",
          password: "123456",
        });

    const rules = {
              username: [
                  {
                      required: true,
                      message: "请输入用户名",
                      trigger: "blur",
                  },
              ],
              password: [
                  { required: true, message: "请输入密码", trigger: "blur" },
              ],
          };
    const loginRef = ref(null);
   const submitForm = (loginRef) => {
      if (!loginRef) return
      loginRef.validate((valid) => {
          if (valid) {
              Login(param).then((rep)=>{
                console.log(rep)
                if (rep.code===200){
                  router.push("/")
                }else{
                   ElMessage.error(rep.message);
                }
              })
          } else {
              ElMessage.error("登录成功");
              return false;
          }
      });
  };



   return {
     rules,
     loginRef,
     submitForm,
     param

   }

  }
}
</script>

<style scoped>

.container{
  height: 100%;
  background-color: #282C34;
  background-image: url(../../assets/img/login=JPG.webp);
  background-size: 100%;

}
.ms-login {
    left: 50%;
    top: 50%;
    width: 350px;
    margin-top: 20px;
    text-align: center;
    font-size: 25px;
    margin-left: 35px;
    overflow: hidden;
}
.loginBox{

  width: 450px;
  height: 300px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%,-50%);
  border-radius: 9px;

}
.loginForm{
  width: 100%;
  position: absolute;
  bottom: 10%;
  padding: 0 20px;
  box-sizing: border-box;
}
.loginBtn{
  display: flex;
  justify-content: flex-end;
}

</style>