<template>
  <div
    class="logon-main-content"
    v-loading="loading"
    :element-loading-text="'正在登录...'">
    <div class="login">
      <h2 class="title">欢迎使用德孝善延伸服务系统</h2>
      <el-form :model="data.loginForm" class="login-form">
        <el-form-item>
          <el-input
            v-model="data.loginForm.name"
            placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="data.loginForm.pwd"
            type="password"
            placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button class="login-btn" type="default" @click="login"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { userInfor } from "@/store/user/user";
import MD5 from "js-md5";
import api from "@/lib/request";
import { ElMessage, ElMessageBox } from "element-plus";

const data = reactive({
  name: "测试",
  loginForm: {
    name: "",
    pwd: "",
  },
});

let loading = ref(false);

const router = useRouter();
const userInforState = userInfor();

onBeforeMount(() => {});

onMounted(() => {});

function login() {
  loading.value = true;
  api()
    .post("/login", {
      name: data.loginForm.name,
      pwd: MD5.md5(data.loginForm.pwd).toLocaleUpperCase(),
    })
    .then((res: any) => {
      if (res.code === 200) {
        userInforState.setLoginState(res.data.user);
        ElMessage.success("登录成功！");
        let userRouter: [] = res.data.user.routerMenue;
        let noChildren = userRouter.find((item) => !item.children.length);

        router.replace({ name: noChildren.name });
        userInforState.setToken(res.data.token);
        userInforState.setRefToken(res.data.refreshToken);
      } else {
        ElMessage.error(res.msg || res);
      }
      loading.value = false;
    });
}
</script>
<style lang="scss" scoped>
.logon-main-content {
  background-image: url("./img/login-bck.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  .login {
    width: 40%;
    height: 60%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(135deg, #5efce8 10%, #736efe 100%);

    .title {
      margin: 30px 0;
      font-size: 30px;
    }
    .copy-info {
      text-align: center;
      p {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
    }

    .login-form {
      display: flex;
      flex-direction: column;
      align-content: center;
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
