<template>
  <div class="container" :style="{ background: 'url(' + backUrl + ')' }">
    <div style="flex: 1"></div>
    <div style="display: flex; flex-direction: column">
      <div style="flex: 1"></div>
      <div id="login-box">
        <h1 class="title">ADM登录</h1>
        <div class="form">
          <div class="item">
            <i class="el-icon-user"></i>
            <input type="text" placeholder="请输入手机号" v-model="userName" />
          </div>
          <div class="item">
            <i class="el-icon-lock"></i>
            <input
              type="password"
              placeholder="请输入密码"
              v-model="userPass"
              @keyup.stop="passTxtKeyUp($event)"
              v-loading.fullscreen.lock="fullscreenLoading"
            />
          </div>
        </div>
        <button @click="startLogin">Login</button>
      </div>
      <div style="flex: 1"></div>
    </div>
    <div style="flex: 1"></div>
  </div>
</template>
<script>
import vueStore from "@/store";
import { sessionStore } from "@/store/sessionStore";
import { userController } from "@/controller/userController";
import { logicConfig } from "@/logicConfig";
import { Message } from "element-ui";

export default {
  name: "login",
  props: [],
  data() {
    return {
      backUrl: require("@/assets/images/login_bg.png"),
      userName: "",
      userPass: "",
      fullscreenLoading: false,
    };
  },
  computed: {},
  methods: {
    //登录按钮事件
    startLogin: async function () {
      if (!this.userName) return Message.warning("请填写用户名");
      if (!this.userPass) return Message.warning("请填写密码");
      this.fullscreenLoading = true;
      try {
        let loginResult = await userController.login(
          this.userName,
          this.userPass
        );

        if (loginResult.result != logicConfig.resultObj.success) {
          this.fullscreenLoading = false;
          Message.error("登录失败，原因：" + loginResult.message);
          return;
        }

        var userToken = loginResult.data;
        if (!userToken) {
          this.fullscreenLoading = false;
          Message.error("登录失败，原因：缺失用户token");
          return;
        }
        sessionStore.userToken = userToken;

        this.$router.replace({ path: vueStore.state.fromPath });
      } catch (err) {
        this.fullscreenLoading = false;
        console.error("登录失败：", err);
        Message.error("登录失败");
      }
    },
    //密码框键盘起来事件
    passTxtKeyUp: function (event) {
      if (event.keyCode == 13) this.startLogin();
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  overflow: hidden;
}

#login-box {
  text-align: center;
  background: #00000080;
  padding: 20px 50px;
  width: 450px;
}

.title {
  color: #ffffff;
  font-size: 32px;
}

.form {
  margin-top: 50px;
}
.item {
  margin-top: 15px;
}

.form i {
  font-size: 18px;
  color: #fff;
  width: 16px;
  height: 16px;
}

.form input {
  width: 180px;
  font-size: 18px;
  border: 0;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  background: #ffffff00;
  color: #fff;
}

#login-box button {
  margin-top: 15px;
  cursor: pointer;
  width: 180px;
  height: 30px;
  font-size: 20px;
  font-weight: 700;
  border: 0;
  background-image: linear-gradient(
    90deg,
    #b8cbb8 0,
    #b8cbb8 0,
    #ddbaee 0,
    #e8a8ee 33%,
    #b8d9f8 66%,
    #59bcf5
  );
  border-radius: 15px;
}

@font-face {
  font-family: login_iconfont;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAOYAAsAAAAAB6QAAANLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqCfIJyATYCJAMMCwgABCAFhGcHOBvQBhHVm6PIfiQYN41nZd3meYYVNZK+CR4+//zuzLzkA/aSyUo4/VagStdbpwECwNhuzTlC4aMmS7J25NE/5P+L6aXpQHix///e8f+V+LwWAMwxuBM+sDygD9qYi6ZQJ0/QW2R3BWKR+yAAS+LlksWl1c3YTg8smIUnDbNSQFIspifGBjAXdGgNxQJzBHpoXw2xCx3IzfIZsDP4vPhHYuYg0SnMhepHS4a59XPkt5symAx0q28YxivB9SWgAxQQvTKD6G22taOiWDSFZZVMI9l6NARy1KDJRMDTJHrrDw8kAoQes9AagHASl/BzxGFBwm83wVkXKgD0OGEErlOK850UytvSPtNezBfGDx+2vHsHW57dQhpuP7ey2fryrlDGOy8GjXdfbn1+G6xHDJcsrbdcqZBcrUu7zFKjq7BzP3xofflRfOzrbjG8r/HaNO9zdjEcPr/14lEhrD6a1DarrVbv7S1WosLjKhad5Tj6GO/eFVtaPvjwQbwzteTpAwMZC2y2P2FmS9Bpz6CoQM8zQVeCzngGRgV5nl7c7EpKy2q3sPqKwybHK46bHKIcg3UcyZgbSJ2ynjBeHYq6lL+iVFRWrltffcxm++cQlWUFyw8NRhou24y76KXVnki3yD1WCLOq5lXrq2s1Bwtzlx2yU+zcOwVWezJdI89Y0p/unNLWlTRJd0J6izYe29WaUezkWNycHteeRD8ApveqVUWB6aY6oPJ/2294IaV9n132f3MrDYDvPsu0wGO6qQHLB3MkgHk/SQ4QqWl+UFoVv7FQAIqqe41IwNIKggnT5ehHf4cTEovAXOBjkJjhBQpzAjGNEgk6rEgEPebkgCVRSgZb4WQOCqFZAKHWIhDYuwwSW26Awt5DTKN8BB2ufoEee+QfNl7tx9s6ZI6MStCC/kFhqHW2UgKiN/RDrbgs/ELuCxyENEryySu2yEN06N8+E3HgmBq4cIthXRN0TCUaiYJIl8exq7pJZKgZHTGkCGQB7QcUDNJyHlqy33eDvEFNYSD2irFegYmDVCQBYFdZCyq7kkl6b15GCAc4jBINcBEsqFZjBHTVtUrIEJHQI9LJxRbKQWXR/Irm4VYBlsxpVVIooTE/mSpd/Kj1YRiNAAA=)
      format("woff2"),
    url(data:font/woff;base64,d09GRgABAAAAAAUYAAsAAAAAB6QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA81krnY21hcAAAAYgAAABYAAABhm1w0ZdnbHlmAAAB4AAAAU4AAAF8bAZJImhlYWQAAAMwAAAALwAAADYdWjgEaGhlYQAAA2AAAAAcAAAAJAeCA4RobXR4AAADfAAAAAwAAAAMDAAAAGxvY2EAAAOIAAAACAAAAAgAUgC+bWF4cAAAA5AAAAAeAAAAIAEQAFduYW1lAAADsAAAAUAAAAJnEKM8sHBvc3QAAATwAAAAJwAAADhGZw3ieJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnqW+EGdu+N/AEMN8h6EBKMyIoogJAHmXDTp4nO2QsQ2AMAwE7xNIgeizAgUDUdGxOsoWwXZgC146v/1OGgMzkI3dmEAnwnVYqsgzS+RTvCnmIt1Xq73D5ybZrpgn/6fCrzXq9k7JrzXwvtUBegDLDw8+eJwljl9LwmAUxs9536amJOyPjhENnJjIwnTba2yDUV0YNYdXswK7sW6s2y4LK3D0CbwKupe+Q5/Cj9PsnR4Oz+E85znwAwqwXtERNWEfGsAAkDltNMp4kElFVHS0a1aATOR2wwnQ0vmphkquXjMOudvj52qFrNzJ88St+4bh13G5memn4fd9Yw34pknpSNI0CZeSRiD2Jh7vmEfTFReeRpNLvH2P01jUNBHN7AN4ZYy/dEFPwYVLuAIQOk3mNNvY5Fy9Da2qVNUy5nN5lQNnuF07ICe2ZetEtbtbr9nFgOqEx0xsE0YXiHsfD/4ZCZOvJCTn3v17mSAWZVUuYiFOhuJuYZjEBSwqVbmEf9+kN366c4XjayZLLO6oSISdx5+j1ms/nEfRPLx4aZnLaS5PS3KJ92AWCUI0G2w34rIbB63RdOwJgntrA/wDxvhEqwAAeJxjYGRgYADie0xMAvH8Nl8ZuFkYQOCubBULgv6/n4WB2QHI5WBgAokCANdeB6IAeJxjYGRgYG7438DAwMIAAkCSkQEVMAMAPVUCEAQAAAAEAAAABAAAAAAAAAAAUgC+eJxjYGRgYGBm8AZiEGACYi4gZGD4D+YzAAAQMwFoAAB4nIWRPW7CQBCFn8GQBJQoSqQ0aVYpKBLJ/JRIqVCgp6AHs+ZHttdaL0jUOU2OkBPkCOloc4pIedhDA0W82tlv3r6ZHckA7rCHh/K75y7ZwyWzkiu4wKNwlfqTsE9+Fq6hiZ5wnfqrcAMveBNusmPGDp5/xayFd2EPt/gQruAGn8JV6l/CPvlbuIYH/AjXqf8KNzDxroWbaHnhwOqp03M126lVaNLIpO54jvViE0/tqTzRNl+ZVHWDzlEa6VTbY5t8u+g5F6nImkQNeavj2KjMmrUOXbB0Luu325HoQWgSDGChMYVjnENhhh3jCiEMUkRFdGf5mO4FNohZaf91T+i2yKkfcoUuAnTOXCO60sJ5Ok2OLV/rUXV0K27LmoQ0lFrNSWKy4g883K2phNQDLIuqDH20uaITf1DMkPwB2JNvV3icY2BigAAuBuyAmZGJkZmRhYE1Jz8525CtMj8vPaOUgQEAKT4EmwA=)
      format("woff"),
    url(data:font/ttf;base64,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)
      format("truetype");
}
</style>