<!--  -->
<template>
  <div class="loginbox">
    <div class="logininfobox">
      <div class="logininfo">
        <div class="title">
          <p>数字迁安</p>
          <p>病虫害监测系统</p>
        </div>
        <div class="info">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="top"
          >
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="ruleForm.username"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                type="password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn" @click="register">登 录</div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      ruleForm: {
        password: "",
        username: "",
      },
      rules: {
        username: { required: true, message: "请输入账号", trigger: "blur" },
        password: { required: true, message: "请输入密码", trigger: "blur" },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    register() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=user.login.login_user",
            data: this.qs.stringify({
              username: this.ruleForm.username,
              password: this.ruleForm.password,
            }),
          }).then((res) => {
            if (res.data.message == "") {
              console.log(res.data.session_key);
              var key = res.data.data.session_key;
              localStorage.setItem("keys", key);
              this.$router.push("/index/home");
              localStorage.setItem("username", this.ruleForm.username);
              localStorage.setItem("myuid", res.data.data.data.myuid);
            } else {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.error(res.data.message);
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.loginbox {
  width: 100%;
  height: 100vh;
  background-image: url("../../../static/images/login/loginbg.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-end;
  .logininfobox {
    width: 700px;
    height: 100%;
    background-color: #fff;
    padding: 0 150px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .logininfo {
      margin-bottom: 50px;
      .title {
        width: 100%;
        text-align: center;
        color: #333333;
        p:first-child {
          font-size: 36px;
        }
        p:last-child {
          font-size: 26px;
          margin-top: 15px;
        }
      }
      .info {
        margin-top: 50px;
        /deep/.el-form-item {
          margin-bottom: 15px;
        }
        /deep/.el-input__inner {
          border: 0;
          background-color: #edf7ff;
        }
      }
      .btn {
        background-color: #4f71ff;
        font-size: 18px;
        text-align: center;
        padding: 10px 0;
        color: #fff;
        border-radius: 8px;
        margin-top: 40px;
        cursor: pointer;
      }
    }
  }
}
</style>