<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>

      <div v-if="user" class="profile-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户ID" label-align="right" align="center" label-class-name="my-label">
            {{ user.id }}
          </el-descriptions-item>
          <el-descriptions-item label="姓名" label-align="right" align="center">
            {{ user.name }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱" label-align="right" align="center">
            {{ user.email }}
          </el-descriptions-item>
          <el-descriptions-item label="电话" label-align="right" align="center">
            {{ user.phone || 'N/A' }}
          </el-descriptions-item>
           <el-descriptions-item label="角色" label-align="right" align="center">
            <el-tag>{{ user.role }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态" label-align="right" align="center">
             <el-tag :type="user.status === 'ACTIVE' ? 'success' : 'danger'">{{ user.status }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="所属区域" label-align="right" align="center" :span="2">
            {{ user.region || 'N/A' }}
          </el-descriptions-item>
          <el-descriptions-item label="技能" label-align="right" align="center" :span="2">
            <template v-if="user.skills && user.skills.length">
              <el-tag v-for="skill in user.skills" :key="skill" type="info" style="margin-right: 8px;">
                {{ skill }}
              </el-tag>
            </template>
            <span v-else>N/A</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
       <div v-else>
        <p>正在加载用户信息...</p>
      </div>

    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth';
import { storeToRefs } from 'pinia';

// 从 Pinia store 中获取用户信息
const authStore = useAuthStore();
// 使用 storeToRefs 来保持响应性
const { user } = storeToRefs(authStore);

</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.profile-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  font-size: 20px;
  font-weight: bold;
}

.profile-content {
  padding: 20px;
}

.my-label {
  background: var(--el-color-success-light-9) !important;
}
</style>