<template>
  <div class="login-wrapper" :style="loginStyle">
    <div class="login">
      <div class="login-title">{{ $t("EDIT_PASSWORD") }}</div>
      <a-form-model
        ref="editPasswordForm"
        :model="editPasswordForm"
        :rules="ruleFormRules"
      >
        <a-alert
          v-show="error"
          type="error"
          :closable="true"
          :message="error"
          show-icon
          style="margin-bottom: 24px"
        />
        <!-- 新密码  -->
        <a-form-model-item prop="newPwd">
          <a-input
            v-model="editPasswordForm.newPwd"
            :placeholder="$t('NEW_PASSWORD')"
            type="password"
          >
            <a-icon slot="prefix" type="lock" />
          </a-input>
        </a-form-model-item>
        <!-- 确认密码 -->
        <a-form-model-item prop="confirmPwd">
          <a-input
            v-model="editPasswordForm.confirmPwd"
            :placeholder="$t('CONFIRM_PASSWORD')"
            type="password"
          >
            <a-icon slot="prefix" type="lock" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button
            :loading="logging"
            block
            size="large"
            type="primary"
            @click="onSubmit"
          >
            {{ $t("CONFIRM") }}
          </a-button>
        </a-form-model-item>

        <a-form-model-item>
          <div class="go-back" @click="onBack">
            <span class="inline-block" style="transform: rotate(180deg)">
              <Icon type="icon-dir-f-double-right" :size="15" />
            </span>
            {{ "返回登录" }}
          </div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Icon } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";
import loginBg from "@/assets/images/login-bg.png";

export default {
  name: "Login",
  components: {
    Icon,
  },
  layout: "none",
  data() {
    return {
      editPasswordForm: {
        newPwd: "",
        confirmPwd: "",
      },
      logging: false,
      error: "",
      isSave: true,
    };
  },
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
    }),
    // 表单校验
    ruleFormRules() {
      return {
        newPwd: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "change",
          },
        ],
        confirmPwd: [
          {
            required: true,
            message: this.$t("PLACEENTER"),
            trigger: "change",
          },
        ],
      };
    },
    loginStyle() {
      const { FILE_SERVER, LOGIN_BACKGROUND } = this.systemConfig || {};
      const backgroundImage =
        FILE_SERVER && LOGIN_BACKGROUND
          ? FILE_SERVER + LOGIN_BACKGROUND
          : loginBg;
      return {
        backgroundImage: `url(${backgroundImage})`,
      };
    },
  },
  created() {},
  methods: {
    onSubmit() {
      this.$refs.editPasswordForm.validate((valid) => {
        if (valid) {
          if (
            this.editPasswordForm.newPwd !== this.editPasswordForm.confirmPwd
          ) {
            this.$message.error(this.$t("PASSWORD_SAMEWARN")); // 两次输入的密码必须相同
          } else {
            this.verification(
              this.editPasswordForm.newPwd,
              this.systemConfig.PWD_LENGTH,
              this.systemConfig.PWD_LEVEL
            );
            if (this.isSave) {
              const { newPwd } = this.editPasswordForm;
              const req = {
                newPwd,
                passwordLevel: this.systemConfig.PWD_LEVEL,
              };
              this.$axios
                .put(
                  `${ApiConstant.PREFIX_CORE}/api/sys/user/change-pwd-fist`,
                  req
                )
                .then(() => {
                  this.$message.success(this.$t("EDIT_SUCCESS")); // 保存成功
                  this.$auth.logout().then(() => {
                    this.$store.commit("account/SET_IS_RESET", false);
                    this.$router.push("/login");
                  });
                });
            }
          }
        }
      });
    },
    onBack() {
      this.$store.commit("account/SET_IS_RESET", false);
      this.$auth.reset();
      this.$router.push({ path: "/login" });
    },
    verification(val, length, level) {
      if (val.length < length) {
        this.isSave = false;
        this.$message.error(this.$t("PASSWORD_LENGTH"));
      } else {
        if (level === "M") {
          const reg = /^(?![^a-zA-Z]+$)(?!\D+$)/;
          if (!reg.test(val)) {
            this.isSave = false;
            this.$message.error(this.$t("PASSWORD_LETTER"));
          } else {
            this.isSave = true;
          }
        }
        if (level === "H") {
          const res =
            /([0-9].*([a-zA-Z].*[!$#%?.&@~^]|[!$#%?.&~^].*[a-zA-Z])|[a-zA-Z].*([0-9].*[!$#%?.&~^]|[!$#%?.&~^].*[0-9])|[!$#%?.&].*([0-9].*[a-zA-Z]|[a-zA-Z].*[0-9]))/;
          if (!res.test(val)) {
            this.isSave = false;
            this.$message.error(this.$t("PASSWORD_SPECIAL"));
          } else {
            this.isSave = true;
          }
        }
        if (level === "L") {
          this.isSave = true;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import (optional, once) "../theme/index.less";

.login-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  .login-title {
    font-size: 15px;
    text-align: center;
    font-weight: 700;
    padding: 14px 0 30px;
    color: #333;
  }
  .login {
    width: 368px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px @base-bg-color;
  }
  .go-back {
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    .text-color(@primary-color);
  }
}
</style>
