<template>
  <div id="login">
    <div class="loginWrap">
      <div class="form">
        <el-row>
          <el-col :span="24" class="form-tit cent">
            <h1>用户登录</h1>
            <p>欢迎登陆！</p>
          </el-col>
          <div class="contianer">
            <el-form
              class="form-con"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
            >
              <el-form-item prop="username">
                <el-input
                  placeholder="请输入用户名"
                  name="username"
                  id="username"
                  v-model="ruleForm.username"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  name="password"
                  id="password"
                  v-model="ruleForm.password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="loginbtn"
                  @click="handleSubmit()"
                  :loading="isLoging"
                  >立即登录</el-button
                >
                <!-- 注释：native.prevent 取消默认事件 -->
              </el-form-item>
            </el-form>
            <div class="btm">
              <el-button
                type="text"
                class="fl"
                @click="$router.push('/register')"
                >还没有企业账号?点击注册</el-button
              >
              <el-button type="text" class="fr" @click="$router.push('/search')"
                >查询注册信息</el-button
              >
            </div>
          </div>
        </el-row>
      </div>
      <!--<div class="bckg">
            <img src="@/assets/login-bg.jpg" alt />
        </div>-->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import { Message } from "element-ui";
import { State, Getter, Mutation, Action } from "vuex-class";
import Layout from "@/views/Layout/Layout.vue";
import { mapActions } from "vuex";
import METHOD from "@/utils/methods";
import { createrouter, asyncRouterMap } from "../../router";
import routers from "@/router";
@Component({
  components: {},
})
export default class Login extends Vue {
  @Action("setMoudleArr") setMoudleArr: any;

  @Provide() isLoging: Boolean = false;
  @Provide() ruleForm: {
    username: String;
    password: String;
    autoLogin: Boolean;
  } = {
    username: "",
    password: "",
    autoLogin: true,
  };
  @Provide() rules = {
    username: [
      {
        required: true,
        message: "请输入用户名",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  };
  addDouter(rolelist: any) {
    let that = this;
    var deArr: any = [];
    let obj: any = {};
    if (rolelist.length == 0) {
      that.$message.error("该用户未分配角色！");
      return;
    }
    rolelist.forEach((ele: any) => {
      let isSelected = ele.children.some((el: any) => el.selected == "true");
      var obj = {
        path: ele.path,
        component: Layout,
        redirect: "",
        meta: {
          title: ele.title,
          icon: ele.icon,
          selected: isSelected ? "true" : ele.selected,
          level: ele.level,
        },
        children: [],
      };
      obj.path = ele.path;
      let childarr: any = ele.children;
      if (childarr.length > 0) {
        childarr.forEach((sele: any) => {
          let vueurl =
            (METHOD.componentUrl as any)[sele.path.replace("/", "")] +
            sele.path;
          let sobj: any = {
            name: sele.name,
            path: sele.path,
            component: () => import(`@/views/${vueurl}.vue`),
            meta: {
              title: sele.title,
              icon: sele.icon,
              selected: sele.selected,
              level: sele.level,
            },
          };
          if (sele.code) sobj.meta.listId = sele.code;
          if (sele.selected == "true") {
            obj.children.push(sobj);
          }
        });
      }
      if (obj.children.length > 0) obj.redirect = (obj.children[0] as any).path;
      deArr.push(obj);
    });
    let arr = deArr.find((ele: any) => ele.meta.selected == "true");
    (that.$router as any).matcher = (createrouter(
      asyncRouterMap
    ) as any).matcher; //重置router
    that.$router.addRoutes(deArr);
    that.setMoudleArr(deArr);
    sessionStorage.setItem("moudleArr", JSON.stringify(deArr));
    that.$router.push(arr.path);
  }
  handleSubmit(): void {
    let that = this;
    (that.$refs["ruleForm"] as any).validate((valid: any) => {
      if (valid) {
        // let today = new Date(),timestamp = today.getTime();
        that.isLoging = true;
        (that as any).$axios
          .post("/account/login", {
            account: that.ruleForm.username,
            password: that.ruleForm.password,
            methodName: "auth",
            timestamp: "",
          })
          .then((res: any) => {
            that.isLoging = false;
            if (res.code == 0) {
              sessionStorage.setItem(
                "userInfo",
                JSON.stringify(res.data.userInfo)
              );
              sessionStorage.setItem("token", JSON.stringify(res.data.token));
			  if(res.data.userInfo.accountStatus==='2'){
				  that.$message.error("该用户已被锁定，请联系管理员！");
				  return;
			  }
              //登陆成功跳转页面
              that.addDouter(res.data.userInfo.roleMenuList);
            }
          })
          .catch(() => {
            that.isLoging = false;
          });
      } else {
        return false;
      }
    });
  }
  created() {
    let usd = sessionStorage.getItem("userInfo");
    if (usd) {
      sessionStorage.removeItem("userInfo");
      sessionStorage.removeItem("token");
    }
    let that = this;
    document.onkeydown = function (e) {
      let key = (window.event as any).keyCode;
      if (key == 13) {
        that.handleSubmit();
      }
    };
  }
}
</script>

<style lang="scss">
@import "@/utils/public.scss";

#login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url("~@/assets/login-bg.jpg") center no-repeat;
  background-size: cover;
}

.loginWrap {
  display: flex;
  align-items: center;
  -webkit-lign-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .bckg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    img {
      width: 100%;
      height: 100vh;
      // filter: blur(20px);
      // -webkit-filter: blur(4px);
    }
  }

  .form {
    background: url("~@/assets/log-mid.png");
    width: 712px;
    height: 524px;
    position: relative;
    z-index: 1;
  }

  .el-row {
    margin-bottom: 20px;
  }

  .form-tit {
    margin-bottom: 20px;
  }
  .form-con{
      width: 320px;
      margin: 0 auto;
      overflow: hidden;
      .el-form-item{
          height: 55px;
          line-height: 55px;
          margin-bottom: 30px;
      }
      .el-form-item:nth-child(3){
          padding-top: 20px;
      }
      .el-form-item__content{
          line-height: 55px;
      }
  }
  h1 {
    margin-bottom: 20px;
    line-height: 55px;
    color: #ffffff;
    font-size: 24px;
    font-family: "微软雅黑";
    font-style: normal;
  }

  p {
    color: #ffb21e;
    font-size: 24px;
    font-family: "微软雅黑";
  }

  .loginbtn {
    background-image: linear-gradient(to top, #ffb320, #ffe86a);
    color: #994908;
    font-size: 18px;
    width: 100%;
    height: 55px;
    border: none;
  }
}

#username,
#password,
#email {
  height: 55px;
  line-height: 20px;
  padding: 15px 20px;
  line-height: 45px;
  background-position: 10px center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  border: 1px solid #2e719c;
  padding-left: 40px;
}

#username {
  background-image: url("../../assets/icon_09.jpg");
}

#password {
  background-image: url("../../assets/icon_16.jpg");
}

#email {
  background-image: url("../../assets/u23.png");
  background-size: 24px;
}
.btm{
    width: 80%;
    margin: 0 auto;
}
</style>
