<template>
  <div class="login-container">
    <div class="login-wrap">
      <div class="login-header-line">
        <img style="height: 20px; bottom: 20px" src="@/assets/provided_w.png" />
        <h2 @click="toPortal" style="cursor: pointer">{{ LOGIN_TITLE }}</h2>
      </div>
      <a-form class="plg-login" :form="form" @submit="handleSubmit">
        <div class="title">{{ LOGIN_LABEL }}</div>
        <a-alert v-if="isLoginError" type="error" closable :message="loginMessage" :after-close="handleClose" />

        <a-form-item>
          <div class="input-wrapper">
            <a-input
              class="input"
              size="large"
              type="text"
              autocomplete="false"
              placeholder="请输入账号"
              v-decorator="['username', { rules: [{ required: true, message: '请输入账号' }], validateTrigger: 'change' }]"
            >
            </a-input>
            <a-icon class="input-icon" type="user" />
          </div>
        </a-form-item>

        <a-form-item>
          <div class="input-wrapper">
            <!-- <div v-if="loginstatus == 'development' ? false : true">
              <a-input
                class="input"
                size="large"
                type="text"
                style="display: none"
                name="yyy"
                autocomplete="new-password"
                placeholder="请输入密码"
              >
              </a-input>
              <a-input
                class="input"
                size="large"
                type="password"
                style="display: none"
                name="yyy"
                autocomplete="new-password"
                placeholder="请输入密码"
              >
              </a-input>
            </div> -->
            <a-input
              class="input"
              size="large"
              type="password"
              autocomplete="false"
              placeholder="请输入密码"
              v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
            >
            </a-input>
            <a-icon class="input-icon" type="lock" />
          </div>
        </a-form-item>

        <a-form-item style="margin-top: 24px">
          <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="state.loginBtn" :disabled="state.loginBtn">确定</a-button>
        </a-form-item>
        <a-form-item style="margin-top: 24px">
          <img style="margin: 0 auto; display: block" src="@/assets/ill_log_in_2.svg" />
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { timeFix } from "@/utils/util";
import { homePage } from "@/config/router.config";
import { LOGIN_TITLE, LOGIN_LABEL } from "@/config/serviceSettings";

export default {
  data() {
    return {
      LOGIN_TITLE: LOGIN_TITLE,
      LOGIN_LABEL: LOGIN_LABEL,
      loginBtn: false,
      isLoginError: false,
      loginMessage: "",
      loginstatus: process.env.NODE_ENV,
      form: this.$form.createForm(this),
      state: {
        loginBtn: false,
      },
    };
  },
  created() {
    localStorage.removeItem("role");
    localStorage.removeItem("token");
    sessionStorage.removeItem("token");
  },
  methods: {
    ...mapActions(["Login", "Logout"]),

    toPortal() {
      this.$router.push("/portal");
    },

    handleSubmit(e) {
      e.preventDefault();
      const {
        form: { validateFields },
        state,
        Login,
      } = this;

      state.loginBtn = true;

      validateFields(["username", "password"], { force: true }, (err, values) => {
        if (!err) {
          let role = values.username;
          if (values.username === "super") {
            role = "super";
          }
          role = "superuser";
          localStorage.setItem("role", role);

          const loginParams = { ...values };
          Login(loginParams)
            .then((res) => {
              if (res.success) {
                this.loginSuccess(res);
              } else {
                this.loginMessage = res.message == "Bad credentials" ? "账号或密码错误" : res.message;
                this.isLoginError = true;
              }
            })
            .catch((err) => {
              this.requestFailed(err);
            })
            .finally(() => {
              state.loginBtn = false;
            });
        } else {
          setTimeout(() => {
            state.loginBtn = false;
          }, 600);
        }
      });
    },

    loginSuccess(res) {
      let homePath = "/home";
      console.log(res, "resssss");
      if (res.homePage) {
        homePath = res.homePage;
      } else {
        homePath = homePage;
      }
      this.$router.push({ path: homePath });

      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: "欢迎",
          description: `${timeFix()}，欢迎回来`,
        });
      }, 100);

      this.isLoginError = false;
    },

    requestFailed(err) {
      this.$notification["error"]({
        message: "错误",
        description: ((err.response || {}).data || err).message || "请求出现错误，请稍后再试",
        duration: 4,
      });
    },
    handleClose() {
      this.isLoginError = false;
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(~@/assets/admin/login_bg_n.png) no-repeat center;
  background-size: cover;
}
.login-wrap {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 15%;
  left: 11%;
  width: 72%;
  .plg-login {
    margin-top: 50px;
    width: 360px;
    .ant-alert.ant-alert-no-icon {
      padding: 10px 15px;
    }
    .title {
      font-size: 24px;
      color: #333333;
      text-align: center;
      line-height: 24px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .slogn_blue {
      display: block;
      width: 259px;
      height: 67px;
      margin: 0 auto;
      margin-top: 34px;
    }
  }
}
.login-header-line {
  color: #ffffff;
}
.login-header-line h2 {
  margin-bottom: 30px;
  font-size: 32px;
  color: #ffffff;
}
.login-header-line h3 {
  font-size: 20px;
  color: #ffffff;
}
.login-button {
  padding: 0 15px;
  font-size: 16px;
  height: 40px;
  width: 100%;
}
.input-wrapper {
  position: relative;
  margin-top: 20px;
  padding-bottom: 5px;
}
.input {
  text-indent: 40px;
}
.input-icon {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 40px;
  line-height: 38px;
  font-size: 14px;
  color: #dce1e7;
  background: #f7f9fc;
  border-right: 1px solid #dce1e7;
}
@media screen and (min-width: 1000px) and (max-width: 1460px) {
  .login-wrap {
    left: 12%;
    width: 75%;
  }
  .login-header-line h2 {
    font-size: 28px;
  }
  .login-header-line h3 {
    font-size: 16px;
  }
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
  .login-wrap {
    left: 12%;
    width: 78%;
  }
  .login-header-line h2 {
    margin-bottom: 20px;
    font-size: 26px;
  }
  .login-header-line h3 {
    font-size: 16px;
  }
}
</style>
