<template>
  <div class="page-container">
    <el-card>
      <template #header>
        <span>个人中心</span>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户名">{{ userInfo?.username }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ userInfo?.realName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ userInfo?.phone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userInfo?.email || '-' }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ userInfo?.departmentName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="角色">
          <el-tag v-for="role in userInfo?.roles" :key="role" size="small" style="margin-right: 4px">
            {{ role }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
</script>

<style scoped>
.page-container {
  padding: 0;
}
</style>
