<template>
    <!-- 基础信息弹出框 -->
  <el-dialog v-model='dialogVisible' :title="dialogTitle" v-bind="dialogSmall" @close="close">
    <div>
        <el-form :model="formContent"
                  ref='dialogFormRef'
                  :rules='rules'
                  >
        <el-form-item label="原密码" prop='oldPassword' :label-width="100">
          <el-input type="oldPassword" v-model="formContent.oldPassword" show-password placeholder="请输入原密码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新密码" prop='newPassword' :label-width="100">
          <el-input type="newPassword" v-model="formContent.newPassword" show-password placeholder="请输入新密码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop='surePassword' :label-width="100">
          <el-input type="surePassword" v-model="formContent.surePassword" show-password placeholder="请再次输入确认密码" autocomplete="off" />
        </el-form-item>
      </el-form>
      </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="save()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  </template>
  
  <script lang="ts" setup>
  import { ref, type Ref  } from 'vue'
  import {dialogSmall} from '@/utils/elementBind'
  import { ElMessage, type FormInstance,type FormItemRule } from 'element-plus'
  import {updatePassWord} from '@/api/user/user'
  // 使用 dayjs 库格式化
  import dayjs from 'dayjs';
  import { type User } from '@/api/user/interface';

  // 定义弹出组件元信息
  const dialogFormRef = ref()
  const dialogTitle = ref('修改密码')
  const surePassword = ref('')
  function useMetaInfo() {
    const dialogVisible = ref(false)
    const formContent = ref<User.ResPassWordUser>({
      id: '',       //用户ID，作为唯一标识
      oldPassword: '',//密码
      newPassword:'',//
      surePassword:'',
    })
    return { dialogVisible, formContent }
  }
  
  const { dialogVisible, formContent } = useMetaInfo()
  // 清空formContent
  const resetFormContent = () => {
    formContent.value = {
        id: '',       //用户ID，作为唯一标识
        oldPassword: '',//密码
        newPassword:'',//
        surePassword:'',
    }
  }
  
  //定义规则
  const formRuleRef = ref<FormInstance>()
  // 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
  oldPassword: [
    { required: true, message: '原密码必填！', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '新密码必填！', trigger: 'blur' },
    { pattern: /^(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/, message: '密码长度为8-16，需包含特殊字符', trigger: 'blur' }
  ],
  surePassword: [
    { required: true, message: '确认密码必填！', trigger: 'blur' },
    {
      validator: (rule: FormItemRule, value: string, callback: Function) => {
        if (value !== formContent.value.newPassword) {
          callback(new Error('两次输入的密码不一致！'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
})
 
  
 // 关闭弹窗
 const close = () => {
    dialogVisible.value = false
    // 清空dialogForm中的值
    resetFormContent()
    // 重置表单
    dialogFormRef.value?.resetFields()
  }
  
  // 保存数据
  const save = () => {
    try {
        dialogFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
          if (formContent.value.id) {
              await updatePassWord(formContent.value);
               ElMessage.success({ message: `${dialogTitle.value}成功！` })
          } 
          close()
          // 刷新表格
          await props.refreshTable!()
        }
      })
    } catch (err) {
      console.error('验证过程中出现错误', err)
    }
  }
  
  // 打开弹窗是编辑
  const open = async ( data: User.ResPassWordUser) => {
    dialogVisible.value = true
    if (data.id) {
      formContent.value = { ...data }
    } 
  }
  
  // 对外映射
  defineExpose({ open })
  const props = defineProps<{
    refreshTable: (() => Promise<void>) | undefined;
  }>()
  

  </script>