<template>
  <div class="login-bg">
    <div class="login-box">
      <p class="login-title">登录</p>
      <el-form :model="form" ref="form" class="login_forms">
        <el-form-item>
          <el-input
            v-model.trim="form.userid"
            autofocus="autofocus"
            placeholder="请输入账号"
            @keyup.enter="login_remember_info()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            type="password"
            v-model.trim="form.password"
            placeholder="请输入密码"
            @keyup.enter="login_remember_info()">
            <!-- <span
                slot="suffix"
                :title="visible ? '显示密码' : '隐藏密码'"
                @click="changePass()"
                style="cursor: pointer"
                :class="visible ? 'eye_dis' : 'eye'"
              ></span> -->
          </el-input>
        </el-form-item>
        <el-form-item prop="yzm" class="yzm">
          <div class="yzm_ctx">
            <el-input
              class="yzm_ipt"
              v-model.trim="form.yzm"
              placeholder="请输入验证码"
              :validate-event="false"
              @keyup.enter="login_remember_info()"></el-input>
            <img class="yzm_img" title="看不清？换一张" :src="imgSrc" @click="getImg()" />
          </div>
        </el-form-item>
        <div class="apaas_button">
          <el-button class="btn_sub" type="primary" @click.prevent="login_remember_info()">登 录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { setCookie, clearCookie } from "../../services/cookie.js";
import menu from "../../router/function";
import { generateRoutes } from "../../router/index";
import inputTable from "../../components/input-table.vue";
import inputObjectTable from "../../components/input-object-table.vue";
import CryptoJS from "crypto-js";

export default {
  props: {},
  components: {
    inputTable,
    inputObjectTable,
  },
  data() {
    return {
      form: {
        userid: "",
        password: "",
        yzm: "",
      },
      imgSrc: "",
    };
  },
  watch: {},
  computed: {},
  created() {
    console.log(111);
    this.getImg();
  },
  mounted() {},
  methods: {
    getMenuObj(menu, parentRowPath, menuObj) {
      menu.forEach((e, idx) => {
        e.rowPath = parentRowPath + "." + idx;
        menuObj[e.path] = e;
        if (e.children && e.children.length) {
          this.getMenuObj(e.children, e.rowPath, menuObj);
        }
      });
    },
    getUser() {
      this.$axios.get(`/v1/api/user/getUserInfo`).then((res) => {
        if (res.data.code == 200) {
          this.$store.commit("setUserInfo", res.data.data);
          // if (res.data.data.userType == 1) {
          //超管
          this.$store.commit("setMenu", menu.adminMenu);

          menu.menuToRouter(menu.adminMenu);

          this.$store.commit("setRoute", menu.adminMenu);

          //存储菜单对象信息
          let menuObj = {};
          this.getMenuObj(menu.adminMenu, "", menuObj);
          this.$store.commit("setMenuObj", menuObj);
          // }
          generateRoutes();
          // this.$router.push("/");
          //跳转到工作台页面
          window.location.href = "/so/manage/ui/#/";
        }
      });
    },
    login_remember_info() {
      if (!this.form.userid) {
        return this.$message.error("请输入账号");
      }
      if (!this.form.password) {
        return this.$message.error("请输入密码");
      }
      if (!this.form.yzm) {
        return this.$message.error("请输入验证码");
      }
      this.$axios.get(`/apaas/system/v5/user/verifyCaptcha?id=${this.imgId}&value=${this.form.yzm}`).then((res) => {
        if (res.data.code == 200) {
          this.login();
        } else {
          this.$message.error(res.data.data);
        }
      });
    },
    login() {
      this.$axios
        .post(`/apaas/system/v5/user/login`, {
          system_account: this.form.userid,
          password: CryptoJS.AES.encrypt(this.form.password, "swuE9cmCZQwrkYRV").toString(),
        })
        .then((res) => {
          if (res.data.code == 200) {
            let data = res.data.data;
            // console.log(data);
            // setCookie("bgToken", data.name);

            this.getUser();
          } else {
            this.$message.error(res.data.desc);
          }
        });
    },
    getImg() {
      this.$axios.get(`/apaas/system/v5/user/getCaptcha??width=240&height=32`).then((res) => {
        if (res.data.code == 200) {
          this.imgId = res.data.data.id;
          this.imgSrc = res.data.data.captcha;
        }
      });
    },
  },
};
</script>

<style scoped>
.login-bg {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/imgs/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
.login-box {
  width: 480px;
  height: 401px;
  background-color: #ffffff;
  box-shadow: 0px 6px 12px 0px rgba(0, 20, 53, 0.3);
  border-radius: 6px;
  padding: 40px;
}
.login-title {
  font-size: 24px;
  font-weight: 600;
  color: #202531;
  text-align: center;
  margin-bottom: 40px;
}
.yzm_ipt {
  width: 240px;
}
.yzm_img {
  vertical-align: middle;
  width: 150px;
  height: 32px;
  margin-left: 10px;
  display: inline-block;
}
.btn_sub {
  width: 400px;
  height: 40px;
  /* line-height: 20px; */
  background-color: #2b4695;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  padding: 0;
  color: #ffffff;
  margin-top: 20px;
}
</style>
