<template>
  <view class="border rounded-xl p-4" @click="emit('goToGrowthPage')">
    <view class="flex justify-between text-sm text-gray-500">
      <text class="text-[#F88842]">{{ item?.date }}</text>
      <text class="text-[#999] text-xs">{{ item?.old }}</text>
    </view>
    <view class="mt-3 grid grid-cols-2 gap-4 text-sm text-[#333]">
      <view>
        <view class="">身高：{{ item?.height }}</view>
        <view class="mt-1">头围：{{ item?.headC }}</view>
      </view>
      <view class="text-right">
        <view class="">体重：{{ item?.weight }}</view>
      </view>
    </view>
  </view>
  <wd-divider color="#ccc"></wd-divider>
</template>
<script setup>
  defineOptions({
    name: 'HeightItem',
  })

  defineProps({
    item: {
      type: Object,
      default: {},
    },
  })

  const emit = defineEmits(['goToGrowthPage'])
</script>

<style lang="scss" scoped>
  .wd-divider {
    margin: 0;
  }
</style>
