<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.home%',
  },
}
</route>
<template>
  <view class="bg-white min-h-screen relative">
    <view class="w-full h-[220rpx] absolute top-0 left-0">
      <image class="w-full h-full object-cover" :src="bg" mode="widthFix" />
    </view>
    <view
      class="absolute top-0 left-0 bg-transparent"
      :style="{ marginTop: safeAreaInsets?.top + 'px' }"
    >
      <view class="max-w-lg mx-auto p-4 bg-transparent">
        <view class="h-[220rpx] mb-[32rpx]">
          <view class="flex justify-end items-center h-[88rpx]">
            <view
              v-show="childrenList.length > 1"
              @click="showChildren = !showChildren"
              class="text-xs flex justify-center items-center px-4 py-1 text-orange-500 bg-white/[0.6] rounded-full whitespace-nowrap"
            >
              <wd-icon
                name="translate-bold"
                color="#F88842"
                size="28rpx"
                class="pr-[8rpx]"
              ></wd-icon>
              切换
            </view>
          </view>
          <view class="flex items-center gap-3">
            <img :src="avatarUrl" class="w-16 h-16 rounded-full object-cover" alt="Baby Avatar" />
            <view v-if="childrenInfo">
              <view class="text-base font-semibold text-[#333]">
                {{ childrenInfo.name }}
                <image
                  @click="goToBabyInfo(childrenInfo.id)"
                  class="w-[28rpx] h-[28rpx] ml-2"
                  :src="edit"
                  mode="widthFix"
                />
              </view>
              <view class="text-[#666] text-xs mt-1">{{ childrenInfo.old }}</view>
            </view>
            <view v-else>
              <text class="text-sm font-semibold text-[#333]">暂无宝宝，请立即添加</text>
            </view>
          </view>
        </view>

        <view
          v-if="inform"
          class="flex items-center justify-between bg-[#FFAC78]/[0.2] px-[32rpx] py-[8rpx] rounded-full mb-[32rpx]"
        >
          <text class="text-orange-500 text-xs">一周时间又到了，该测量宝宝的身高体重了哦~</text>
          <wd-icon name="close" color="#F88842" size="24rpx"></wd-icon>
        </view>

        <view>
          <view class="flex items-center justify-between mb-4">
            <text class="text-base font-medium text-[#333]">喂养记录</text>
            <view @click="withButtonProps" class="text-[#999] text-xs flex items-center gap-1">
              查看详情
              <wd-icon name="arrow-right" color="#999" size="28rpx"></wd-icon>
            </view>
          </view>

          <view class="grid grid-cols-2 gap-4">
            <view
              v-for="(item, index) in cardList"
              :key="item.id + index"
              :class="item.bg"
              @click.stop="goToPage(item.id, 'feed')"
              class="p-[24rpx] rounded-xl flex items-center gap-2 box-border"
            >
              <view class="w-[96rpx] h-[96rpx] shrink-0">
                <image class="w-full h-full object-cover" :src="item.img" mode="widthFix" alt="" />
              </view>
              <view class="shrink-0">
                <view class="text-sm text-[#333]">{{ item.title }}</view>
                <view class="text-[#666] text-xs mt-2">
                  {{ item.subTitle ? item.subTitle : item.onTitle }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <wd-gap bg-color="#F2F2F2"></wd-gap>

      <view
        style="border-bottom: 2rpx solid #f2f2f2"
        class="box-border flex items-center justify-between p-4"
      >
        <text class="text-base font-medium text-[#333]">生长记录</text>
        <view @click="goToGrowthPage('')" class="text-[#999] text-xs flex items-center gap-1">
          查看详情
          <wd-icon name="arrow-right" color="#999" size="28rpx"></wd-icon>
        </view>
      </view>
      <view class="max-w-lg mx-auto">
        <template v-if="growthRecordList.length">
          <HeightItem
            v-for="(item, index) in growthRecordList"
            :key="item.id + index"
            :item="item"
            @goToGrowthPage="goToGrowthPage(item.id)"
          />
        </template>

        <Empty v-else />
      </view>
    </view>
  </view>
  <wd-action-sheet
    safe-area-inset-bottom
    v-model="showChildren"
    class="text-xl"
    title="选择宝宝"
    @close="close"
  >
    <wd-cell-group border>
      <wd-cell
        size="large"
        v-for="(item, index) in childrenList"
        :key="item.id"
        @click="getChildren(item.id)"
        is-link
        center
      >
        <template #icon>
          <view class="w-[96rpx] h-[96rpx] rounded-full overflow-hidden mr-[28rpx]">
            <img class="w-full h-full object-cover" :src="item.img" alt="" />
          </view>
        </template>
        <template #title>
          <view class="h-full flex text-[#333] items-center text-base">
            {{ item.name }}
          </view>
        </template>
      </wd-cell>
    </wd-cell-group>
  </wd-action-sheet>
  <wd-message-box />
  <tabbar />
</template>

<script setup>
  import Empty from '@/components/empty/empty.vue'
  import tabbar from '@/layouts/tabbar.vue'
  import baby01 from '@img/index/baby-01.svg'
  import baby02 from '@img/index/baby-02.svg'
  import baby03 from '@img/index/baby-03.svg'
  import baby04 from '@img/index/baby-04.svg'
  import edit from '@img/index/edit.svg'
  import bg from '@img/index/bg.svg'
  import HeightItem from '@/components/height/height-item.vue'
  import { http } from '@/utils/http.ts'

  import { useMessage, useToast } from 'wot-design-uni'
  const message = useMessage()
  defineOptions({
    name: 'Home',
  })
  const avatarUrl = ref(
    'https://ai-public.mastergo.com/ai/img_res/143ef8d204b778ce9763c0e887f9bde2.jpg',
  )
  const current = ref(0)
  const currentTag = ref(0)
  const showChildren = ref(false)

  const inform = ref('')
  const childrenInfo = ref({
    id: '1',
    name: '小奥特曼',
    old: '2岁3个月4天',
  })

  const childrenList = ref([
    {
      id: '0',
      name: '小奥特曼',
      img: avatarUrl.value,
    },
    {
      id: '1',
      name: '小奥特曼',
      img: avatarUrl.value,
    },
    {
      id: '2',
      name: '小奥特曼',
      img: avatarUrl.value,
    },
  ])

  const growthRecordList = ref([])

  // 卡片的数组
  const cardList = ref([
    {
      id: '',
      img: baby01,
      title: '喂奶',
      bg: 'bg-blue-50',
      subTitle: '2次，共100ml',
      onTitle: '0次，共0ml',
    },
    {
      id: 'cardList',
      img: baby02,
      title: '辅食',
      bg: 'bg-yellow-50',
      subTitle: '1次',
      onTitle: '0次',
    },
    {
      id: 'cardList',
      img: baby03,
      title: '睡眠',
      bg: 'bg-pink-50',
      subTitle: '2次，共10分钟',
      onTitle: '0次，共0分钟',
    },
    {
      id: 'cardList',
      img: baby04,
      title: '尿不湿',
      bg: 'bg-green-50',
      subTitle: '1次，共1次便便',
      onTitle: '0次，共0次便便',
    },
  ])

  function close() {
    showChildren.value = false
  }
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()

  // 前往宝宝信息页面
  function goToBabyInfo(id = '') {
    uni.navigateTo({
      url: `/pages/myUser/component/babyInformation?id=${id}`,
    })
  }

  // 暂无宝宝数据
  function withButtonProps() {
    message
      .confirm({
        msg: '请先添加宝宝后再录入',
        title: '暂无宝宝数据',
        confirmButtonText: '前往添加',

        // cancelButtonProps: {
        //   // type: 'error',
        //   customClass: 'custom-shadow',
        // },
        // confirmButtonProps: {
        // type: 'primary',
        // customClass: 'custom-shadow',
        // },
      })
      .then(() => {
        goToBabyInfo()
      })
      .catch(() => {})
  }

  async function getChildren(id) {
    console.log(id, 'getChildren')
    await close()
    let data = await http.get('/')
  }

  // 获取生长记录
  async function getGrowthRecordList() {
    let data = await [
      {
        id: 'Record',
        date: '2025-03-07',
        old: '2岁4个月3天',
        height: '85.0cm',
        weight: '3kg',
        headC: '30cm',
      },
      {
        id: 'Record',
        date: '2025-03-07',
        old: '2岁4个月3天',
        height: '85.0cm',
        weight: '3kg',
        headC: '30cm',
      },
      {
        id: 'Record',
        date: '2025-03-07',
        old: '2岁4个月3天',
        height: '85.0cm',
        weight: '3kg',
        headC: '30cm',
      },
    ]

    growthRecordList.value = data
    // http.post('/')
  }

  // 跳转到喂养记录的页面
  function goToPage(params, pages) {
    // if (params) {
    // if (pages == 'feed') {
    uni.navigateTo({
      url: `/pages/feed/feed?id=${params}`,
    })
    // } else {

    // }
    // } else {
    //   withButtonProps()
    // }
  }

  function goToGrowthPage(hid) {
    if (hid) {
      uni.navigateTo({
        url: `/pages/height-details/height-details?id=${hid}`,
      })
    } else {
      uni.navigateTo({
        url: `/pages/growth/growth`,
      })
    }
  }

  // 根据id 查询婴儿信息
  function getBabyInfoDetail(babyId) {
    // /baby/info/getDetail/{babyId}
  }

  onMounted(() => {
    getGrowthRecordList()
  })

  onLoad(() => {
    let babyInfo = {
      id: 1,
      name: '',
      nickname: '',
      birthdayNew: '',
      constellation: '',
      gender: '',
      bloodType: '',
      avatar: '',
      createTime: '',
    }
    babyInfo = JSON.stringify(babyInfo)
    uni.setStorageSync('babyInfo', babyInfo)
  })
</script>

<style lang="scss" scoped>
  .fa-signal,
  .fa-wifi,
  .fa-battery-full {
    font-size: 14px;
    color: #262626;
  }

  ::v-deep .wd-button.is-primary {
    background: linear-gradient(270deg, #f88842 0%, #ffac78 100%);
  }
</style>
