<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="babyInfo">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '%my.babyInfo%',
  },
}
</route>
<template>
  <view class="min-h-screen bg-white">
    <!-- 顶部导航栏 -->
    <view class="fixed top-0 left-0 w-full bg-white border-b border-gray-100 z-50">
      <view class="flex items-center justify-between px-4 h-12">
        <text class="text-sm text-blue-500">编辑</text>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="pt-14 pb-4 px-4">
      <!-- 头像区域 -->
      <view class="flex justify-center mt-6 mb-8 relative">
        <view
          class="relative w-20 h-20 rounded-full bg-blue-50 flex items-center justify-center overflow-hidden"
        >
          <image :src="babyAvatarUrl" alt="宝宝头像" class="w-full h-full object-cover" />
          <view
            class="absolute bottom-0 right-0 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center"
          >
            <icon class="fas fa-camera text-white text-xs"></icon>
          </view>
        </view>
      </view>

      <!-- 信息列表 -->
      <view class="space-y-4">
        <view class="info-item">
          <text class="info-label">宝宝昵称</text>
          <text class="info-value">小星星</text>
        </view>

        <view class="info-item">
          <text class="info-label">宝宝性别</text>
          <text class="info-value">男孩</text>
        </view>

        <view class="info-item">
          <text class="info-label">宝宝生日</text>
          <text class="info-value">2023年3月4日</text>
        </view>

        <view class="info-item">
          <text class="info-label">宝宝血型</text>
          <text class="info-value text-gray-400">未填写</text>
        </view>

        <view class="info-item">
          <text class="info-label">宝宝二维码</text>
          <icon class="fas fa-chevron-right text-gray-400"></icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  const babyAvatarUrl = ref(
    'https://ai-public.mastergo.com/ai/img_res/8a91ddc9c5fd46352c7b33ff40870fb7.jpg',
  )

  const show = ref(false)
  onLoad(({ id }) => {
    if (id) {
      //请求宝宝得参数
      show.value = true
    } else {
      //没有宝宝参数
      show.value = false
    }
  })
</script>

<style scoped>
  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .info-label {
    font-size: 15px;
    color: #333333;
  }

  .info-value {
    font-size: 15px;
    color: #666666;
  }
</style>
