<template>
  <div class="user-info-container">
    <div class="info-item">
      <div class="label">头像</div>
      <div class="value">
        <img :src="userInfo.avatar" alt="User Avatar" class="avatar" />
      </div>
    </div>

    <div class="info-item">
      <div class="label">用户名</div>
      <div class="value">{{ userInfo.username }}</div>
    </div>

    <div class="info-item">
      <div class="label">真实姓名</div>
      <div class="value">
        {{ userInfo.realName }}
        <span v-if="userInfo.verified" class="verified-badge">已认证</span>
      </div>
    </div>

    <div class="info-item">
      <div class="label">手机号</div>
      <div class="value">{{ userInfo.phone }}</div>
    </div>

    <div class="info-item">
      <div class="label">邮箱</div>
      <div class="value">{{ userInfo.email }}</div>
    </div>

    <div class="info-item">
      <div class="label">城市</div>
      <div class="value">{{ userInfo.city }}</div>
    </div>

    <div class="info-item">
      <div class="label">技能标签</div>
      <div class="value">
        <span v-for="(tag, index) in userInfo.tags" :key="index" class="tag">
          #{{ tag }}
        </span>
      </div>
    </div>

    <div class="info-item">
      <div class="label">技能证书</div>
      <div class="value certificates">
        <img
          v-for="(cert, index) in userInfo.certificates"
          :key="index"
          :src="cert"
          alt="Certificate"
          class="certificate-image"
        />
      </div>
    </div>

    <div class="info-item">
      <div class="label">个人简介</div>
      <div class="value bio">{{ userInfo.bio }}</div>
    </div>
  </div>
  
</template>

<script setup lang="ts">
definePageMeta({ layout: 'm' })
import { reactive } from 'vue'

const userInfo = reactive({
  avatar: "/static/images/avater2.png",
  username: "王刚",
  realName: "王刚",
  verified: true,
  phone: "138******96",
  email: "651234754@qq.com",
  city: "重庆",
  tags: ["五金工具", "电子产品"],
  certificates: [
    "/static/images/cert1.jpg",
    "/static/images/cert2.jpg",
    "/static/images/cert3.jpg",
  ],
  bio: "你好！我是专注于工业设计和机械设计领域...",
})
</script>

<style scoped>
.user-info-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.info-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.label {
  width: 80px;
  color: #666;
  font-size: 14px;
}

.value {
  flex: 1;
  text-align: right;
  color: #333;
  font-size: 14px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.verified-badge {
  background-color: #4080ff;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-left: 10px;
}

.tag {
  margin-left: 8px;
  color: #4080ff;
}

.certificates {
  display: flex;
  justify-content: flex-end;
}

.certificate-image {
  width: 60px;
  height: 80px;
  margin-left: 10px;
  object-fit: cover;
}

.bio {
  text-align: left;
  line-height: 1.5;
}
</style>
