<script setup lang="ts">
import { updateUserPwd } from '@/api/system/user';
import useUserStore from '@/store/modules/user';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pwdRef = ref<ElFormInstance>();
const userStore = useUserStore();

const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
const equalToPassword = (rule: any, value: string, callback: Function) => {
  if (value !== form.value.newPassword) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}
function validatePassword(rule:any, value:string,callback:any) {
  // 定义正则表达式，分别匹配大写字母、小写字母、数字和特殊字符
  const uppercaseRegex = /[A-Z]/;
  const lowercaseRegex = /[a-z]/;
  const digitRegex = /[0-9]/;
  const specialCharRegex = /[^a-zA-Z0-9]/;

  // 检查密码是否包含大写字母
  if (!uppercaseRegex.test(value)) {
    return callback(new Error('新密码必须含有大小写字母、数字、特殊字符'));
  }
  // 检查密码是否包含小写字母
  if (!lowercaseRegex.test(value)) {
    return callback(new Error('新密码必须含有大小写字母、数字、特殊字符'));
  }
  // 检查密码是否包含数字
  if (!digitRegex.test(value)) {
    return callback(new Error('新密码必须含有大小写字母、数字、特殊字符'));
  }
  // 检查密码是否包含特殊字符
  if (!specialCharRegex.test(value)) {
    return callback(new Error('新密码必须含有大小写字母、数字、特殊字符'));
  }
  callback();
}
const rules = {
  oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    {
      min: 8,
      max: 16,
      message: '长度在 8 到 16 个字符',
      trigger: 'blur'
    },
    {
      validator: validatePassword,
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
    {
      required: true,
      validator: equalToPassword,
      trigger: 'blur'
    }
  ]
}
const setPassWord = () => {
  pwdRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const res = await updateUserPwd(form.value.oldPassword, form.value.newPassword, 0);
      if (res.code != 200) {
        ElNotification({
          title: '提示',
          message: '修改失败，请稍后重试！',
          type:'error'
        });
        form.value.oldPassword = '';
        form.value.newPassword = '';
        form.value.confirmPassword = '';
        return;
      }
      ElNotification({
        title: '提示',
        message: '修改成功，即将为你跳转至登录页...',
        type:'success'
      });
      await userStore.logout()
    }
  });
}
</script>

<template>
<div class="reset-pwd">
  <el-form class="pwd-module" ref="pwdRef" :model="form" :rules="rules" label-width="auto">
    <h3 class="title">首次登录修改密码</h3>
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input v-model="form.oldPassword" placeholder="请输入旧密码" type="password" show-password />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="form.newPassword" placeholder="请输入新密码" type="password" show-password />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="form.confirmPassword" placeholder="请确认新密码" type="password" show-password />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 100%" @click="setPassWord">修改密码</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<style scoped lang="scss">
.reset-pwd{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url('@/assets/images/login-background.jpg');
  background-size: cover;
}
.pwd-module{

    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 40px;

      input {
        height: 40px;
      }
    }

}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #707070;
  font-weight: 700;
}
</style>
