<template>
  <el-dialog
    v-model="dialogVisible"
    title="个人信息"
    width="500px"
    :close-on-click-modal="false"
    class="user-info-dialog"
    :closed="close"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="60px" class="px-4">
      <!-- 昵称 -->
      <el-form-item label="昵称" prop="hiddenName">
        <el-input v-model="form.hiddenName" placeholder="将心比心" clearable class="w-full" />
      </el-form-item>

      <!-- 签名 -->
      <el-form-item label="签名" prop="signature">
        <el-input v-model="form.signature" placeholder="个性签名" clearable class="w-full" />
      </el-form-item>

      <!-- 头像 -->
      <el-form-item label="头像" prop="hiddenAvatar">
        <div class="w-full">
          <UploadFile v-model="form.hiddenAvatar" :limit="1" />
          <div class="text-xs text-gray-400 mt-2">修改资料后，请点击清除缓存</div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="flex justify-end gap-3">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="loading"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import UploadFile from '@/components/common/UploadFile/index.vue'
import { updateUserInfo } from '@/api'
import type { UpdateUserInfoDto } from '@/api'
import { useResetData } from '@/hooks'

const dialogVisible = ref(false)
const loading = ref(false)
const formRef = useTemplateRef<FormInstance>('formRef')

const [form, resetForm] = useResetData<UpdateUserInfoDto>({
  hiddenName: '',
  signature: '',
  hiddenAvatar: '',
})

// 表单验证规则
const rules: FormRules = {
  hiddenName: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 1, max: 20, message: '昵称长度在 1 到 20 个字符', trigger: 'blur' },
  ],
  signature: [{ max: 100, message: '签名长度不能超过 100 个字符', trigger: 'blur' }],
  hiddenAvatar: [{ required: true, message: '请上传头像', trigger: 'blur' }],
}

// 打开弹窗方法
const open = (userInfo: UpdateUserInfoDto) => {
  dialogVisible.value = true
  form.value = userInfo
  console.log(form.value)
}

// 关闭弹窗方法
const close = () => {
  dialogVisible.value = false
  resetForm()
}

// 取消操作
const handleCancel = () => {
  close()
}

// 确认操作
const handleConfirm = async () => {
  try {
    // 验证表单
    await formRef.value?.validate()

    loading.value = true

    // 这里可以添加保存逻辑
    await updateUserInfo(form.value)
    close()

    ElMessage.success('保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}

// 暴露方法给父组件
defineExpose({
  open,
})
</script>

<style scoped>
.user-info-dialog :deep(.el-dialog__header) {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.user-info-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.user-info-dialog :deep(.el-dialog__footer) {
  padding: 10px 20px 20px 20px;
  border-top: 1px solid #f0f0f0;
}

.user-info-dialog :deep(.el-form-item__label) {
  color: #606266;
  font-weight: 500;
}
</style>
