<template>
  <div class="user-detail">
    <a-card title="用户详情" :bordered="false">
      <!-- 基本信息 -->
      <a-descriptions bordered>
        <a-descriptions-item label="用户名">
          {{ userInfo.username }}
        </a-descriptions-item>
        <a-descriptions-item label="昵称">
          {{ userInfo.nickname }}
        </a-descriptions-item>
        <a-descriptions-item label="手机号">
          {{ userInfo.phone }}
        </a-descriptions-item>
        <a-descriptions-item label="邮箱">
          {{ userInfo.email }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="userInfo.status === 1 ? 'green' : 'red'">
            {{ userInfo.status === 1 ? '启用' : '禁用' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ userInfo.createTime }}
        </a-descriptions-item>
      </a-descriptions>

      <!-- 操作按钮 -->
      <div class="operation-buttons" style="margin-top: 24px">
        <a-button type="primary" @click="handleEdit">编辑</a-button>
        <a-button style="margin-left: 8px" @click="goBack">返回</a-button>
      </div>
    </a-card>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  const { closeCurrentTab } = useTabsViewStore();

  const userInfo = ref({
    username: 'mockUser',
    nickname: 'mockNickname',
    phone: '1234567890',
    email: 'mock@example.com',
    status: 1,
    createTime: '2023-01-01 12:00:00',
  });

  const route = useRoute();
  const router = useRouter();

  onMounted(() => {
    getUserDetail();
  });

  // 获取用户详情
  async function getUserDetail() {
    try {
      const userId = route.params.id;
      // 这里替换成实际的 API 调用
      const response = await $api.user.getDetail(userId);
      userInfo.value = response.data;
    } catch (err) {
      console.error('err', err);
      $message.error('获取用户详情失败');
    }
  }

  // 编辑用户
  function handleEdit() {
    const userId = route.params.id;
    router.push(`/user/edit/${userId}`);
  }

  // 返回上一页并关闭当前标签
  function goBack() {
    router.back();
    closeCurrentTab(route);
  }
</script>

<style lang="less" scoped>
  .user-detail {
    padding: 24px;
    background: #fff;

    .operation-buttons {
      text-align: center;
    }
  }
</style>
