<template>
  <div>
    <div class="topbar">
      <div class="logo">
        <img src="~@/assets/img/logo.png" />
      </div>
      <div class="title">
        <img src="~@/assets/img/top_title.png" />
      </div>
    </div>
    <div class="contnet">
      <div class="login_form">
        <img src="~@/assets/img/top_title.png" alt="" />
        <el-form :model="loginForm" :rules="loginRules" ref="form">
          <el-row>
            <el-col :span="24">
              <div class="login_title">欢迎登陆系统</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="账号" prop="userid">
                <el-input v-model="loginForm.userid" placeholder="请输入您的账号" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  show-password
                  v-model="loginForm.password"
                  placeholder="请输入密码"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="24">
              <el-checkbox v-model="loginForm.noLogin">三天免登录</el-checkbox>
            </el-col>
          </el-row> -->
          <el-row class="login_btn">
            <el-button type="primary" @click="loginSubmit">登录</el-button>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { login } from "@/api/login";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import cache from "@/utils/cache";

const router = useRouter();
const form = ref(null) as any;
const loginForm = reactive({
  userid: "",
  password: ""
});
const loginRules = reactive({
  userid: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }]
});
const loginSubmit = () => {
  form.value.validate((valid: boolean) => {
    if (valid) {
      login(loginForm).then((res: any) => {
        if (res.code === 0) {
          ElMessage.success("登录成功");
          router.push("/InformationFilling");
          cache.session.set("userId", loginForm.userid);
        } else {
          ElMessage.warning(res.msg);
        }
      });
    }
  });
};
</script>
<style lang="scss" scoped>
.topbar {
  height: 90px;
  background: #020066;
  display: flex;
  align-items: center;
  .logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 50px;
  }
  .title {
    img {
      height: 40px;
    }
  }
}
.contnet {
  width: 100%;
  height: calc(100vh - 90px);
  overflow: hidden;
  background-image: url(../../assets/img/bj2.jpg);
  background-size: 100% 100%;
  .login_form {
    position: fixed;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    width: 30%;
    box-sizing: border-box;
    img {
      width: 100%;
    }
    .el-form {
      width: 100%;
      height: 330px;
      background-color: #fff;
      border: 1px solid #c0c4cc;
      border-top: 3px blue solid;
    }
    .login_title {
      font-size: 20px;
      color: #999;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #c0c4cc;
      margin-bottom: 20px;
    }
    .el-form-item {
      display: block;
      padding: 0 20px;
      &__label {
        color: #000;
        font-size: 16px;
      }
    }
    .el-button {
      width: 100%;
      margin: 30px 20px 0 20px;
      background-color: #4a4996;
      border-color: #4a4996;
    }
  }
}
</style>
