<template>
  <div class="login">
    <div class="login_main">
      <div class="title1">无人灭火机器人数字孪生后台管理系统</div>
      <div class="title2">国际花园小区</div>
      <el-form class="fromclass" :model="form" :rules="rules" ref="formref"
        style="width: 16.2vw;margin: 0 auto;margin-top: 4vh;">
        <el-form-item prop="phone">
          <el-input v-model="form.phone" placeholder="请输入您的账号" clearable class="widthClass" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="请输入您的密码" clearable class="widthClass" @keyup.enter="commit" />
        </el-form-item>
      </el-form>
      <div class="logingo" @click="commit">登录</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { loginApi } from "../../api/login.js";
import { setToken } from '@/utils/auth.js'
const router = useRouter();
const form = ref({
  phone: '',
  password: ''
})
const formref = ref(null)
const rules = {
  phone: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
};
// 登录
const commit = () => {
  formref.value.validate(valid => {
    if (valid) {
      loginApi(form.value).then(res => {
        console.log(res, '登录');
        if (res.code == 200) {
          setToken(res.data.token)//储存token
          localStorage.setItem('menu', 1)//默认选中工作台
          router.replace({ path: '/home' })
        }
      })

    }
  })
}
</script>
<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: url(../../static/image/loginback.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: auto;
}

.login_main {
  width: 30vw;
  height: 25vw;
  margin: 0 auto;
  margin-top: calc((100vh - 25vw)/2);
  background-image: url(../../static/image/loginmain.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 50px;

}

.title1 {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  line-height: 48px;
  text-align: right;
  font-style: normal;
  background: linear-gradient(to bottom, #FFFFFF 50%, #96CBFF 100%);


  width: 100%;
  text-align: center;
  font-size: 26px;
  color: #D5F6FF;
  opacity: 0.79;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.title2 {
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #D5F6FF;
  opacity: 0.79;
  line-height: 48px;
}

.widthClass {
  width: 100%;
  height: 2.2vw;
  margin: 0 auto;
  margin-top: 1vh;

}

.logingo {
  width: 16.5vw;
  height: 2.2vw;
  text-align: center;
  line-height: 2.2vw;
  margin: 0 auto;
  margin-top: 3vh;
  color: #ffffff;
  background-image: url(../../static/image/loginbutton.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

:deep().widthClass .el-input__wrapper {
  background-color: #06325c;
  /* opacity: 0.25; */
  box-shadow: none;
  border: 1px solid #064a74;
  /* color: #06325c; */
}

:deep().widthClass .el-input__inner {
  color: #ffffff !important;
}

:deep().widthClass .el-input__inner::placeholder {
  color: #ffffff !important;
  opacity: 1;

}
</style>