<template>
  <div
    class="login_bg"
    style="
      background-image: url(img/login_images/login_base.png);
      background-color: #555;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      position: relative;
    "
  >
    <div class="login_adv">
      <!-- <img
        src="img/login_images/logo.png"
        style="margin-top: 15%; margin-left: 15%"
      /> -->
    </div>
    <div class="login_main">
      <div class="login-form" style="background-color: #fff">
        <div class="login-header">
          <h2 style="font-size: 30px; text-align: center; padding-bottom: 20px">
            {{ $t("login.signInTitle") }}
          </h2>
        </div>
        <el-form
          ref="loginForm"
          :model="ruleForm"
          :rules="rules"
          label-width="0"
          size="large"
          @keyup.enter="login"
        >
          <el-form-item prop="user">
            <el-input
              v-model="ruleForm.user"
              prefix-icon="el-icon-user"
              clearable
              :placeholder="$t('login.userPlaceholder')"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              prefix-icon="el-icon-lock"
              clearable
              show-password
              :placeholder="$t('login.PWPlaceholder')"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%"
              :loading="islogin"
              round
              @click="login"
              @keyup.enter="login"
              >{{ $t("login.signIn") }}</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 其他方式登录 -->
        <!-- <el-divider>{{ $t('login.signInOther') }}</el-divider>

				<div class="login-oauth">
					<el-button size="small" type="success" icon="sc-icon-wechat" circle></el-button>
				</div> -->
      </div>

      <div class="login_adv__bottom copyrightBottom">
        © {{ $t("login.copyright") }}
      </div>
    </div>
  </div>
</template>

<script>
import routeConfig from "@/config/route";
import { $t } from "../../locales";
export default {
  data() {
    return {
      ruleForm: {
        user: "",
        password: "",
      },
      rules: {
        user: [
          {
            required: true,
            message: this.$t("login.userError"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("login.PWError"),
            trigger: "blur",
          },
        ],
      },
      islogin: false,
    };
  },
  watch: {},
  created: function () {
    this.$TOOL.data.remove("TOKEN");
    this.$TOOL.data.remove("USER_INFO");
    this.$TOOL.data.remove("MENU");
    this.$TOOL.data.remove("PERMISSIONS");
    this.$TOOL.data.remove("grid");
    if (this.$TOOL.data.get("APP_LANG")) {
      if (
        this.$TOOL.data.get("APP_LANG") != "zh-CN" &&
        this.$TOOL.data.get("APP_LANG") != "en-US"
      ) {
        this.$TOOL.data.remove("APP_LANG");
      }
    }
    this.$store.commit("clearViewTags");
    this.$store.commit("clearKeepLive");
    this.$store.commit("clearIframeList");
  },
  methods: {
    async login() {
      var validate = await this.$refs.loginForm.validate().catch(() => {});
      if (!validate) {
        return false;
      }

      this.islogin = true;
      //获取token
      var loginRequest = {
        user: this.ruleForm.user,
        password: this.$TOOL.crypto.Security(this.ruleForm.password),
      };
      var adminLoginResult = await this.$API.authentication.login.post(loginRequest);
      var token=adminLoginResult.Token;
      if (token && token.length > 10) {
        this.$TOOL.data.set("TOKEN", token);
        var userInfo = await this.$API.authentication.getInfo.post();
        if (userInfo) {
          userInfo.role = ["SA", "admin", "Auditor"];
          this.$TOOL.data.set("USER_INFO", userInfo);
          var languageCode = "";
          if (
            this.$TOOL.data.get("APP_LANG") &&
            this.$TOOL.data.get("APP_LANG") === "en-US"
          ) {
            languageCode = this.$TOOL.data.get("APP_LANG");
          } else {
            languageCode = "zh-CN";
          }
          var resultList =
            await this.$API.adminManage.findAdminStatisticRecords.post(
              languageCode
            );
          this.$TOOL.data.set("DashboardIndex_INFO", resultList);
          this.$TOOL.data.remove("ContentConfigStorage");
          //获取菜单
          var featureInfo =
            await this.$API.authentication.getAdminRoleFeaturs.post(
              userInfo.RoleCodes[0]
            );
          if (featureInfo) {
            if (featureInfo.FeatureCodeList.length == 0) {
              this.islogin = false;
              this.$alert($t("login.noAccessTip"), $t("login.noAccess"), {
                type: "error",
                center: true,
              });
              return false;
            }
            var menu = [];
            menu.push({
              name: "home",
              path: "/home",
              meta: {
                title: "menu.home",
                icon: "el-icon-home-filled",
                type: "menu",
              },
              children: [
                {
                  name: "dashboard",
                  path: "/dashboard",
                  meta: {
                    title: "menu.dashboard",
                    icon: "sc-icon-dashboard",
                    affix: true,
                  },
                  component: "home",
                },
                {
                  name: "userCenter",
                  path: "/usercenter",
                  meta: { title: "menu.userCenter", icon: "sc-icon-user-info" },
                  component: "userCenter",
                },
              ],
            });
            var menuList = routeConfig.getRouteList(
              routeConfig.routes,
              featureInfo.FeatureCodeList
            );
            menuList.forEach((em) => {
              //console.log("em.name: " + em.name);
              if ((em.name == "backManage") & !adminLoginResult.IsDistributedServer) {
                //非分布式隐藏 serverInfoList 菜单
                const index = em.children.findIndex(v => v.name === "serverInfoList");
                    em.children.splice(index, 1);
              } 
              menu.push(em);
            });
            this.$TOOL.data.set("MENU", menu);
          } else {
            this.islogin = false;
            this.$message.warning(this.$t("login.loadingMenuError"));
            return false;
          }
          var toPath = "/";
          if (this.$store.state.global.toPath == "/sysLog") {
            toPath = "/sysLog";
          }
          this.$router.replace({
            path: toPath,
          });
          this.islogin = false;
        }
      } 
      else {
        this.islogin = false;
        this.$message.warning(adminLoginResult.message);
        return false;
      }
    },
  },
};
</script>

<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
}
.login_adv {
  width: 33.33333%;
}
.login_adv__title {
  color: #fff;
  padding: 40px;
}
.login_adv__title h2 {
  font-size: 40px;
}
.login_adv__title h4 {
  font-size: 18px;
  margin-top: 10px;
  font-weight: normal;
}
.login_adv__title p {
  font-size: 14px;
  margin-top: 10px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
}
.login_adv__title div {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.login_adv__title div span {
  margin-right: 15px;
}
.login_adv__title div i {
  font-size: 40px;
}
.login_adv__title div i.add {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
}
.login_adv__bottom {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: #fff;
  padding-bottom: 40px;
  background-image: linear-gradient(transparent, #000);
}

.login_main {
  flex: 1;
  overflow: auto;
  display: flex;
}
.login-form {
  width: 400px;
  margin: auto;
  padding: 20px 0;
}
.login-header {
  margin-bottom: 20px;
}
.login-header .logo {
  display: flex;
  align-items: center;
}
.login-header .logo img {
  width: 35px;
  height: 35px;
  vertical-align: bottom;
  margin-right: 10px;
}
.login-header .logo label {
  font-size: 24px;
}
.login-header h2 {
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
}
.login-oauth {
  display: flex;
  justify-content: space-around;
}
.login-form .el-divider {
  margin-top: 40px;
}

.login_config {
  position: absolute;
  top: 20px;
  right: 20px;
}
.el-dropdown-menu__item.selected {
  color: var(--el-color-primary);
}

@media (max-width: 1200px) {
  .login-form {
    width: 340px;
    margin-top: 35%;
  }
}
@media (max-width: 1000px) {
  .login_main {
    display: block;
  }
  .login-form {
    width: 100%;
    padding: 1px 40px;
  }
  .login_adv {
    display: none;
  }
  .copyrightBottom {
    text-align: right;
    padding-right: 10%;
  }
}
@media (min-width: 1250px) {
  .login_main {
    display: block;
  }
  .login-form {
    padding: 1px 40px;
    margin-top: 22%;
    margin-right: 22%;
  }
  .copyrightBottom {
    text-align: right;
    padding-right: 17%;
  }
}
</style>
<style >
@media (max-width: 1000px) {
  .el-message-box {
    --el-messagebox-title-color: var(--el-text-color-primary);
    --el-messagebox-width: 320px;
    --el-messagebox-border-radius: 4px;
    --el-messagebox-font-size: var(--el-font-size-large);
    --el-messagebox-content-font-size: var(--el-font-size-base);
    --el-messagebox-content-color: var(--el-text-color-regular);
    --el-messagebox-error-font-size: 12px;
    --el-messagebox-padding-primary: 15px;
    display: inline-block;
    width: var(--el-messagebox-width);
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: var(--el-color-white);
    border-radius: var(--el-messagebox-border-radius);
    border: 1px solid var(--el-border-color-lighter);
    font-size: var(--el-messagebox-font-size);
    box-shadow: var(--el-box-shadow-light);
    text-align: left;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
@media (min-width: 1250px) {
  .el-message-box {
    --el-messagebox-title-color: var(--el-text-color-primary);
    --el-messagebox-width: 420px;
    --el-messagebox-border-radius: 4px;
    --el-messagebox-font-size: var(--el-font-size-large);
    --el-messagebox-content-font-size: var(--el-font-size-base);
    --el-messagebox-content-color: var(--el-text-color-regular);
    --el-messagebox-error-font-size: 12px;
    --el-messagebox-padding-primary: 15px;
    display: inline-block;
    width: var(--el-messagebox-width);
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: var(--el-color-white);
    border-radius: var(--el-messagebox-border-radius);
    border: 1px solid var(--el-border-color-lighter);
    font-size: var(--el-messagebox-font-size);
    box-shadow: var(--el-box-shadow-light);
    text-align: left;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}
.el-dialog__body {
  padding: calc(var(--el-dialog-padding-primary) + 10px)
    var(--el-dialog-padding-primary);
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
  padding-top: 10px;
  padding-bottom: 10px;
}
.el-dialog__footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
  border-top: 2px solid rgba(0, 0, 0, 0.06);
}
.el-form-item__label {
  font-weight: bold;
  line-height: 32px;
}
</style>