<template>
  <div style="margin-top: 20px; margin-left: 20px">
    <div class="pw">密码规则设置</div>
    <div class="mt">用户设置新密码时必须符合以下规则：</div>
    <div class="mt">密码最小长度为8位数，最大长度为 20 位</div>
    <div class="mt">密码必须同时包含数字和字母</div>
    <div class="st">
      <span style="width: 150px; line-height: 36px">请输入密码:</span>
      <el-input :type="x" v-model="passwords">
        <i slot="suffix" class="el-icon-view" @click="changeShow"></i>
      </el-input>
    </div>
    <div class="mt2">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { createPasswords, getPasswords } from "@/api/setting/passwords";

export default {
  name: "Passwords",
  components: {},
  data() {
    return {
      passwords: null,
      x: "password",
    };
  },
  created() {
    this.getPasswords();
  },
  methods: {
    /** 查询密码 */
    getPasswords() {
      getPasswords().then((response) => {
        this.passwords = response.data.passwordValue;
      });
    },
    submit() {
      var pwdRegex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z])");
      if (this.passwords.length < 8 || this.passwords.length > 20) {
        this.$modal.msgError("您的密码长度不符合！");
        return false;
      }
      if (!pwdRegex.test(this.passwords)) {
        this.$modal.msgError(
          "您的密码复杂度太低（密码中必须包含字母、数字），请及时修改密码！"
        );
        return false;
      }
      const data = this.passwords;
      createPasswords({ passwordValue: data }).then((response) => {
        this.$modal.msgSuccess("设置成功");
      });
    },
    //切换是否显示密码
    changeShow() {
      if (this.x == "password") {
        this.x = "text";
      } else {
        this.x = "password";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pw {
  font-weight: bold;
  font-size: large;
}
.mt {
  margin-top: 10px;
  font-size: medium;
}
.st {
  margin-top: 20px;
  font-size: medium;
  display: flex;
  width: 400px;
}
.mt2 {
  margin-top: 20px;
}
.el-input--medium .el-input__inner {
  width: 200px;
}

.el-icon-view {
  position: relative;
  top: 10px;
}
</style>
