<!-- 修改密码弹窗 -->
<script lang="ts" setup name="ResetPwd">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { changePwd } from '@/api/system/user'
import { RSAencrypt } from '@/utils/security'
import { validatePassword } from '@/utils/validate'

const dialogFormVisible = ref<boolean>(false) // 对话框是否显示
const dataFormRef = ref<FormInstance>()
// 表单对象
const userForm = reactive({
  oldpassword: '', // 原密码
  password: '', // 密码
  repassword: '', // 重复密码
})
// 校验旧密码
const validateOldPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('旧密码不能为空'))
  }
  callback()
}
// 校验新密码
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  }
  else {
    if (validatePassword(value)) {
      callback()
    }
    else {
      callback(new Error('最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符'))
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('重复密码不能为空'))
  }
  else if (value !== userForm.password) {
    callback(new Error('两次输入密码不一致!'))
  }
  else {
    callback()
  }
}

// 校验规则
const rules: FormRules = reactive({
  oldpassword: [{ required: true, validator: validateOldPass, trigger: ['blur', 'change'] }],
  password: [{ required: true, validator: validatePass, trigger: ['blur', 'change'] }],
  repassword: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
})// 前端校验规则
// 弹窗初始化
const initDialog = () => {
  dialogFormVisible.value = true
  resetForm()
  nextTick(() => {
    dataFormRef.value?.clearValidate()
  })
}

defineExpose({ initDialog })

// 重置表单
function resetForm() {
  userForm.oldpassword = ''
  userForm.password = ''
  userForm.repassword = ''
}
// 保存数据
function saveData() {
  dataFormRef.value?.validate(async (valid) => {
    const submitForm = {
      oldPwd: userForm.oldpassword,
      newPwd: userForm.password,
    }
    submitForm.oldPwd = await RSAencrypt(submitForm.oldPwd)
    submitForm.newPwd = await RSAencrypt(submitForm.newPwd)
    if (valid) {
      changePwd(submitForm).then((_) => {
        ElMessage.success('修改密码成功')
        dialogFormVisible.value = false
      })
    }
  })
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="修改密码" width="520px" append-to-body>
    <el-form ref="dataFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
      <el-form-item label="原密码" prop="oldpassword">
        <el-input v-model.trim="userForm.oldpassword" type="password" placeholder="必填" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model.trim="userForm.password" type="password" show-password placeholder="必填" />
      </el-form-item>
      <el-form-item label="重复密码" prop="repassword">
        <el-input v-model.trim="userForm.repassword" type="password" show-password placeholder="必填" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveData">
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: flex-end;
}
</style>