<template>
  <el-dialog
    v-model="visible"
    title="编辑资料"
    width="500px"
    @close="handleDialogClose"
  >
    <el-form
      ref="editFormRef"
      :model="editForm"
      :rules="editFormRules"
      label-width="80px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="editForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="editForm.sex">
          <el-radio :value="0">保密</el-radio>
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
          v-model="editForm.birth"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="editForm.phone" placeholder="请输入手机号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSaveProfile">
        保存
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { updateUserProfile } from "@/api/user";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: null
  },
  userId: {
    type: [Number, String],
    default: ""
  }
});

const emit = defineEmits(["update:modelValue", "saved"]);

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value)
});

const loading = ref(false);
const editFormRef = ref(null);

const editForm = reactive({
  email: "",
  phone: "",
  name: "",
  sex: 0,
  birth: ""
});

const editFormRules = {
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
  ]
};

const syncForm = () => {
  editForm.name = props.userInfo?.name || "";
  editForm.sex = props.userInfo?.sex || 0;
  editForm.birth = props.userInfo?.birth || "";
  editForm.email = props.userInfo?.email || "";
  editForm.phone = props.userInfo?.phone || "";
};

const handleSaveProfile = async () => {
  try {
    await editFormRef.value.validate();
    loading.value = true;
    const res = await updateUserProfile(props.userId, editForm);
    if (res.code === 200) {
      ElMessage.success("保存成功");
      visible.value = false;
      emit("saved");
    }
  } catch (error) {
    console.error("保存失败", error);
    if (error !== false) {
      ElMessage.error("保存失败");
    }
  } finally {
    loading.value = false;
  }
};

const handleDialogClose = () => {
  editFormRef.value?.resetFields();
};

watch(
  () => props.modelValue,
  (value) => {
    if (value) {
      syncForm();
    }
  }
);
</script>
