<template>
  <el-dialog title="修改密码" :modal="false" width="500px" :model-value="modelValue" @close="closed">
    <el-form :model="params" class="editPassword-page">
      <el-form-item label="老密码">
        <el-input placeholder="请输入老密码" v-model="params.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input placeholder="请输入新密码" show-password v-model="params.password"></el-input>
      </el-form-item>
      <el-form-item label="密码强度：">
        <div class="input_span">
          <span id="one" />
          <span id="two" />
          <span id="three" />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="updatePwd">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { editPassword } from "@/api/sys";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
import {
  saveRoleMenuInfo,
  getRoleMenuIds,
  getMenuTree,
  getPasswordLevel
} from "@/api/user-manage";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});
const store = useStore();
const params = ref({});

const emits = defineEmits(["update:modelValue", "updateRole"]);
const closed = () => {
  emits("update:modelValue", false);
};

const onComfirm = () => {
  saveRoleMenuInfo(params).then((res) => {
    ElMessage.success("操作成功");
  });
  closed();
};
const updatePwd = () => {
  if (Number(sysLevel.value) > Number(currentLevel.value)) {
    ElMessage.error("当前密码等级不够,请增加复杂度");
    return false;
  }
  if (params.value.password.length > 20) {
    ElMessage.error("密码长度不能超过20位!");
    return false;
  }
  editPassword({
    ...params.value
  }).then((res) => {
    ElMessage.success("修改成功");
    closed();
    store.dispatch("user/logout");
  });
};
let currentLevel = ref(0);
const checkStrong = (sValue) => {
  let level = 0;
  // 正则表达式验证符合要求的
  if (sValue.length >= 6) {
    level++;
  }
  if (/\d/.test(sValue) && /[a-z]/.test(sValue) && /[A-Z]/.test(sValue)) {
    level++;
  } // 数字 字母小写,大写
  // if (/[a-z]/.test(sValue)) { modes++; } // 小写
  // if (/[A-Z]/.test(sValue)) { modes++; } // 大写
  if (/\W/.test(sValue)) {
    level++;
  } // 特殊字符
  currentLevel.value = level;
  return level;
};

const sysLevel = ref(0);
const getPwdLevel = () => {
  getPasswordLevel().then((res) => {
    sysLevel.value = res;
  });
};
getPwdLevel();

watch(
  () => params.value.password,
  (newname, oldname) => {
    const msgText = checkStrong(newname);
    if (msgText > 1 || msgText === 1) {
      document.getElementById("one").style.background = "#00D1B2";
    } else {
      document.getElementById("one").style.background = "#eee";
    }
    if (msgText > 2 || msgText === 2) {
      document.getElementById("two").style.background = "orange";
    } else {
      document.getElementById("two").style.background = "#eee";
    }
    if (msgText === 3) {
      document.getElementById("three").style.background = "red";
    } else {
      document.getElementById("three").style.background = "#eee";
    }
  }
);
</script>

<style lang="scss" scoped>
.editPassword-page {
  .table-header-wrap {
    width: 380px;
  }

  .input_span {
    span {
      display: inline-block;
      width: 50px;
      height: 10px;
      border: 1px solid #ccc;

      &:first-child {
        border-right: 0;
        border-radius: 5px 0 0 5px;
      }

      &:last-child {
        border-left: 0;
        border-radius: 0 5px 5px 0;
      }
    }
  }
}
</style>
