<template>
  <el-dialog :title="props.type == '01' ? '修改密码' : '查看密码'" width="40%" :model-value="modelValue" :before-close="closed">
    <el-form ref="fromref" :model="params" class="editPassword-page" :rules="rules" :disabled="props.type == '02'"
      style='display:black !important;'>
      <el-form-item label="新密码" prop="password">
        <el-input placeholder="请输入新密码" type='text' v-model="params.password"></el-input>
      </el-form-item>
      <el-form-item label="密码强度：">
        <div class="input_span">
          <span id="ones" />
          <span id="twos" />
          <span id="threes" />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" v-if="props.type == '01'" @click="updatePwd(fromref)">保存</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 { getApi, postApi } from "@/api/tobAcco_api.js";
import { defineProps, watch, ref, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  userId: {
    type: String,
    required: ''
  },
  type: {
    type: String,
    required: '01'
  }
});
let currentLevel = ref(0);
const fromref = ref()
const store = useStore();
const params = ref({
  password: ''
});
const rules = {
  password: [{ required: true, message: "请输入新密码", trigger: "blur" }],
};
const emits = defineEmits(["update:modelValue", "updateRole"]);
// 初始化
onMounted(() => {
  if (props.type == '02') {
    getApi({}, `/mosty-base/sysUser/showPwd?id=${props.userId}`).then(res => {
      console.log(res, 'res');
      params.value.password = res
    })
  }
});
const closed = () => {
  if (props.type == '01') {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("update:modelValue", false);
        params.value.password = ''
      })
  } else {
    emits("update:modelValue", false);
    params.value.password = ''
  }
};
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;
      }
      editPassword({
        userid: props.userId,
        password: Base64.encode(params.value.password),
      }).then((res) => {
        ElMessage.success("修改成功");
        emits("update:modelValue", false);
        params.value.password = ''
      });
    } else {
      ElMessage.warning('请输入必填项！！！')
    }
  });

};
const checkStrong = (sValue) => {
  let level = 0;
  // 正则表达式验证符合要求的
  if (sValue && 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;
};
watch(
  () => params.value.password,
  (newname, oldname) => {
    const msgText = checkStrong(newname);
    if (msgText > 1 || msgText === 1) {
      document.getElementById("ones").style.background = "#00D1B2";
    } else {
      document.getElementById("ones").style.background = "#eee";
    }
    if (msgText > 2 || msgText === 2) {
      document.getElementById("twos").style.background = "orange";
    } else {
      document.getElementById("twos").style.background = "#eee";
    }
    if (msgText === 3) {
      document.getElementById("threes").style.background = "red";
    } else {
      document.getElementById("threes").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>
