<script lang='ts' setup>
import { callOutline, cardOutline, keyOutline, personOutline } from "ionicons/icons";

const userStore = useUserStore();
const { userProfile } = storeToRefs(userStore);
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <back-button slot="start" />
        <ion-title>个人设置</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <div class="space-y-4">
        <div class="space-y-4">
          <!-- UID -->
          <div class="info-item">
            <div class="flex items-center gap-2">
              <ion-icon :icon="keyOutline" class="text-xl text-primary" />
              <span class="label">用户UID</span>
            </div>
            <span class="value">{{ userProfile?.uid || '-' }}</span>
          </div>

          <!-- 姓名 -->
          <div class="info-item">
            <div class="flex items-center gap-2">
              <ion-icon :icon="personOutline" class="text-xl text-primary" />
              <span class="label">真实姓名</span>
            </div>
            <span class="value">{{ userProfile?.fullName || '-' }}</span>
          </div>

          <!-- 手机号 -->
          <div class="info-item">
            <div class="flex items-center gap-2">
              <ion-icon :icon="callOutline" class="text-xl text-primary" />
              <span class="label">手机号码</span>
            </div>
            <span class="value">{{ userProfile?.user.username || '-' }}</span>
          </div>

          <!-- 身份证号 -->
          <div class="info-item">
            <div class="flex items-center gap-2">
              <ion-icon :icon="cardOutline" class="text-xl text-primary" />
              <span class="label">身份证号</span>
            </div>
            <span class="value">{{ (userProfile as any)?.idCard || '-' }}</span>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.card {
  background: linear-gradient(180deg, #ffeef1, #ffffff 15%);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.label {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.value {
  font-size: 15px;
  color: #666;
  font-weight: 400;
}
</style>
