<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"
            @change="passHandChange"
          >
            <a-icon slot="prefix" type="lock" />
          </a-input>
        </a-form-model-item>
        <!-- 密码强度 -->
        <a-form-model-item
          v-if="isLow"
          style="display: flex; align-items: center"
          :label="$t('密码强度')"
        >
          <div v-if="isLow" class="passColor">
            <span v-if="isLow"></span>
            <span v-if="isIn"></span>
            <span v-if="isHigh"></span>
          </div>
          <div class="passTool">
            <span v-show="isIn === false && isHigh === false && isLow">低</span>
            <span v-show="isLow === true && isHigh === false && isIn">中</span>
            <span v-show="isLow === true && isIn === true && isHigh">高</span>
          </div>
        </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,
      isLow: false, // 密码等级低
      isIn: false, // 密码等级中
      isHigh: false, // 密码等级高
    };
  },
  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/mdm/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" });
    },
    passHandChange(e) {
      if (e.target.value) {
        this.isLow = true;
        const reg = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
        const reg1 = /[A-Za-z].*[!$#%?.&@~^]|[!$#%?.&@~^].*[A-Za-z]/;
        const reg2 = /[0-9].*[!$#%?.&@~^]|[!$#%?.&@~^].*[0-9]/;

        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 (
          reg.test(e.target.value) ||
          reg1.test(e.target.value) ||
          reg2.test(e.target.value)
        ) {
          this.isIn = true;
        } else {
          this.isIn = false;
        }
        if (res.test(e.target.value)) {
          this.isHigh = true;
        } else {
          this.isHigh = false;
        }
      } else {
        this.isLow = false;
      }
    },
    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);
  }
}
.passColor {
  display: flex;
  align-items: center;
  border-radius: 10px;
  width: 255px;
  margin: 10px 0;
  background: #ccc;
  position: relative;
  span {
    display: inline-block;
    width: 85px;
    height: 14px;
    border-radius: 10px;
  }
  span:nth-of-type(1) {
    background: red;
    border-radius: 10px 0 0 10px;
  }
  span:nth-of-type(2) {
    background: #ffa500;
    border-radius: 0;
  }
  span:nth-of-type(3) {
    background: #25b668;
    border-radius: 0 10px 10px 0;
  }
}
.passTool {
  position: absolute;
  left: 0;
  top: -35px;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    display: inline-block;
    width: 30px;
    text-align: center;
  }
  span:nth-of-type(1) {
    margin-left: 27px;
  }
  span:nth-of-type(2) {
    margin-left: 112px;
  }
  span:nth-of-type(3) {
    margin-left: 197px;
  }
}
</style>
