<template>
  <div>
    <h2>用户信息</h2>
    <div v-if="userInfo">
      <p>用户名: {{ userInfo.username }}</p>
      <p>邮箱: {{ userInfo.email }}</p>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
    <button @click="fetchUserInfo">获取用户信息</button>
    <button @click="handleUpdateUserInfo">更新用户信息</button>
    <button @click="handleDeleteUser">删除用户</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getUserInfo, updateUserInfo as updateUserInfoApi, deleteUser as deleteUserApi } from "@/api/user";

const userId = "123"; // 假设用户ID为123
const userInfo = ref(null);

const fetchUserInfo = async () => {
  try {
    const info = await getUserInfo(userId);
    userInfo.value = info;
  } catch (error) {
    console.error("获取用户信息失败", error);
  }
};

const handleUpdateUserInfo = async () => {
  try {
    const updatedInfo = {
      username: "newUsername",
      email: "newEmail@example.com",
    };
    await updateUserInfoApi(userId, updatedInfo);
    fetchUserInfo(); // 重新获取更新后的用户信息
  } catch (error) {
    console.error("更新用户信息失败", error);
  }
};

const handleDeleteUser = async () => {
  try {
    await deleteUserApi(userId);
    userInfo.value = null; // 清空用户信息
  } catch (error) {
    console.error("删除用户失败", error);
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>
