<template>
  <!-- 修改密码对话框 -->
  <el-dialog
    v-model="visible"
  :title="'修改密码'"
  :append-to-body="true"
  >
  <!-- 表单容器 -->
  <el-form
    ref="dataFormRef"
  :model="dataForm"
  :rules="dataRule"
  label-width="80px"
  @keyup.enter="onSubmit(dataFormRef)"
  >
  <!-- 账号信息 -->
  <el-form-item label="账号">
    <span>{{ userName }}</span>                           <!-- 显示当前用户名 -->
  </el-form-item>

  <!-- 原密码输入项 -->
  <el-form-item
    label="原密码"
    prop="password"
  >
  <el-input
    v-model="dataForm.password"
  type="password"
  />
  </el-form-item>

  <!-- 新密码输入项 -->
  <el-form-item
    label="新密码"
    prop="newPassword"
  >
  <el-input
    v-model="dataForm.newPassword"
  type="password"
  />
  </el-form-item>

  <!-- 确认密码输入项 -->
  <el-form-item
    label="确定密码"
    prop="confirmPassword"
  >
  <el-input
    v-model="dataForm.confirmPassword"
  type="password"
  />
  </el-form-item>
  </el-form>

  <!-- 对话框底部按钮区域 -->
  <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>  <!-- 点击取消按钮关闭对话框 -->
        <el-button
          type="primary"
          @click="onSubmit(dataFormRef)"
        >确定</el-button>
      </span>
  </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'                      // 导入 Element Plus 的消息提示组件
import { ref, reactive, computed, nextTick } from 'vue'       // 从 Vue 导入组合式 API 函数
import { useUserStore } from '@/store'                        // 从 Vuex store 模块中导入用户状态管理
import { useRouter } from 'vue-router'                        // 从 vue-router 导入路由导航器实例
import http from '@/utils/http'                               // 导入 HTTP 请求工具
import { encrypt } from '@/utils/encrypt'                     // 导入加密工具函数
import { clearLoginInfo } from '@/utils/auth'                 // 导入清除登录信息的工具函数

// 定义响应式变量和引用
const visible = ref(false)                                    // 控制修改密码弹窗的可见性
const dataForm = reactive({                                   // 修改密码表单的数据对象
  password: '',                                               // 原始密码
  newPassword: '',                                            // 新密码
  confirmPassword: ''                                         // 确认新密码
})
const dataFormRef = ref()                                     // 引用修改密码表单组件实例

// 初始化函数：显示修改密码弹窗并重置表单
const init = () => {
  visible.value = true                                        // 显示修改密码弹窗
  nextTick(() => {
    dataFormRef.value?.resetFields()                          // 在下一个 DOM 更新周期后重置表单
  })
}

// 自定义验证规则：确保确认密码与新密码一致
const validateConfirmPassword = (rule, value, callback) => {
  if (dataForm.newPassword !== value) {
    callback(new Error('确认密码与新密码不一致'))               // 如果确认密码与新密码不一致，则返回错误
  } else {
    callback()                                                // 否则通过验证
  }
}

// 定义表单验证规则
const dataRule = reactive({
  password: [{ required: true, message: '原密码不能为空', trigger: 'blur' }], // 原密码必填
  newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }], // 新密码必填
  confirmPassword: [
    { required: true, message: '确认密码不能为空', trigger: 'blur' },            // 确认密码必填
    { validator: validateConfirmPassword, trigger: 'blur' }                    // 自定义验证规则
  ]
})

// 获取用户 Store 实例，用于管理用户相关信息
const userStore = useUserStore()

// 计算属性：动态获取用户名
const userName = computed(() => userStore.name)

// 获取路由导航器实例
const router = useRouter()

// 提交表单处理函数
const onSubmit = async formEl => {
  if (!formEl) return                                          // 如果没有表单元素，直接返回

  await formEl.validate(valid => {                             // 调用表单验证方法
    if (valid) {                                               // 如果验证通过
      http({
        url: http.adornUrl('/sys/user/password'),              // 修改密码 API 路径
        method: 'post',                                        // 请求方法
        data: http.adornData({
          password: encrypt(dataForm.password),                // 加密原始密码
          newPassword: encrypt(dataForm.newPassword)           // 加密新密码
        })
      }).then(() => {
        ElMessage({
          message: '密码修改成功',                              // 成功提示信息
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false                              // 关闭修改密码弹窗
            nextTick(() => {
              clearLoginInfo()                                 // 清除登录信息
              router.replace({ name: 'login' })                // 跳转到登录页面
            })
          }
        })
      }).catch(error => {
        ElMessage.error('密码修改失败，请稍后再试')               // 失败提示信息
      })
    }
  })
}

// 将 init 方法暴露给父组件调用
defineExpose({ init })
</script>
