<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<!-- 我的宝宝 -->
<template>
  <view>
    <headerTitle title="我的宝宝"></headerTitle>
    <view class="Empty-baby">
      <!-- <view>
        <image class="Empty-baby" src="/src/static/icon/Empty.svg"></image>
      </view> -->
      <view
        class="baby-center"
        v-for="(item, index) in babyList"
        :key="index"
        @click="JumpBtn(item)"
      >
        <view class="baby-profile">
          <image style="width: 96rpx; height: 96rpx" :src="item.avatarUrl" />
        </view>
        <view class="babyWarp">
          <view class="baby-font">{{ item.baby }}</view>
          <view class="baby-year">{{ item.year }}</view>
        </view>
      </view>
    </view>
    <view class="baby-Bottom">
      <wd-button @click="addBaby">添加宝宝</wd-button>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import headerTitle from './headerTitle.vue'
  const babyList = ref([
    {
      avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg',
      baby: '可爱宝宝',
      year: '2岁三个月',
    },
    {
      avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg',
      baby: '可爱宝宝',
      year: '2岁三个月',
    },
    {
      avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg',
      baby: '可爱宝宝',
      year: '2岁三个月',
    },
  ])

  // 添加宝宝
  const addBaby = () => {
    uni.navigateTo({
      url: '/pages/myUser/component/babyInformation',
    })
  }

  const JumpBtn = (item) => {
    const songList = encodeURIComponent(JSON.stringify(item))
    uni.navigateTo({
      url: `/pages/myUser/component/babyInformation?songDate=${songList}`,
    })
  }
</script>

<style lang="scss" scoped>
  .Empty-baby {
    width: 100%;
    height: calc(100vh - 272rpx);
    background: #f2f2f2;
  }

  .baby-center {
    display: flex;
    height: 96rpx;
    padding: 32rpx;
    background: #fff;
  }
  .baby-profile {
    margin-right: 24rpx;
    overflow: hidden;
    border-radius: 50%;
  }
  .babyWarp {
    width: 100%;
    height: 100%;
    .baby-font {
      display: flex;
      align-items: flex-end;
      font-size: 28rpx;
      font-weight: 600;
      height: 48rpx;
      color: #333;
    }
    .baby-year {
      display: flex;
      align-items: flex-end;
      height: 48rpx;
      font-size: 24rpx;
      color: #666;
    }
  }

  .baby-Bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 128rpx;
    padding: 16rpx 32rpx;
  }
  ::v-deep .wd-button {
    gap: 10px;
    flex: 1 0 0;
  }
</style>
