<template>
  <el-dialog title="修改密码" width="40%" :model-value="modelValue" :before-close="closed">
    <el-form ref="formone" :model="params" class="editPassword-page" label-width="100px"
      style='display:black !important;' :rules="rules">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input placeholder="请输入旧密码" v-model="params.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input placeholder="请输入新密码" show-password v-model="params.password"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="newPassword">
        <el-input placeholder="请输入新密码" show-password v-model="params.newPassword"></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 type="primary" @click="updatePwd(formone)">保存</el-button>
        <el-button @click="closed">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { editPassword } from "@/api/sys";
import Base64 from "base-64";
import { getItem } from "@/utils/storage";
import { defineProps, watch, ref, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const formone = ref()
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});
let currentLevel = ref(0);
const store = useStore();
const params = ref({
  oldPassword: '',
  password: '',
  newPassword: ''
});
const rules = {
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  password: [{ required: true, message: "请输入新密码", trigger: "blur" }],
  newPassword: [{ required: true, message: "请输入确认新密码", trigger: "blur" }],
};
const emits = defineEmits(["update:modelValue", "updateRole"]);
// 初始化
onMounted(() => {
  params.value.oldPassword = ''
  params.value.password = ''
  params.value.newPassword = ''
});
const closed = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("update:modelValue", false);
      params.value.oldPassword = ''
      params.value.password = ''
      params.value.newPassword = ''
    })
};

const updatePwd = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (currentLevel.value != 3) {
        ElMessage.error("当前密码等级不够,请增加复杂度,需要包含大小写、数字、符号。");
        return false;
      }
      if (params.value.password.length > 20) {
        ElMessage.error("密码长度不能超过20位!");
        return false;
      }
      if (params.value.oldPassword == params.value.password) {
        ElMessage.error("新密码不能与旧密码相同");
        return false;
      }
      if (params.value.password != params.value.newPassword) {
        ElMessage.error("新密码与确认密码不相同");
        return false;
      }
      editPassword({
        userid: getItem("USERID"),
        oldPassword: Base64.encode(params.value.oldPassword),
        password: Base64.encode(params.value.password),

      }).then(() => {
        ElMessage.success("修改成功");
        emits("update:modelValue", false);
        store.dispatch("user/logout");
      });
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  });
};
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;
  console.log(level);
  return level;
};



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 {
  display: block !important;

  .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>
