<route lang="json5" type="growth">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%growth.records%',
  },
}
</route>

<template>
  <view class="min-h-screen bg-white box-border">
    <wd-navbar
      title="统计"
      left-arrow
      fixed
      :bordered="false"
      :placeholder="true"
      :safeAreaInsetTop="true"
      @click-left="handleClickLeft"
    ></wd-navbar>

    <wd-tabs
      style="--wot-tabs-nav-height: 96rpx"
      :swipeable="true"
      v-model="tabIndex"
      color="#F88842"
      @change="changeIndex"
      inactiveColor="#666666"
    >
      <block class="h-full" v-for="(item, idnex) in tabList" :key="'tabs' + item.id">
        <wd-tab :title="item.title">
          <template v-if="tabIndex === 0">
            <REcharts :unit="unit" />
          </template>
        </wd-tab>
      </block>
    </wd-tabs>

    <!-- 提示信息区域 -->
    <view
      class="mx-4 px-3 py-1 mb-3 rounded-full flex items-center text-sm bg-[#F88842]/[0.2] text-[#F88842]"
    >
      过去 7 天平均每天喂奶 450ml
    </view>

    <!-- 数据统计区域 -->
    <div class="grid grid-cols-3 gap-4 mx-4 mb-3">
      <!-- 喂奶时长 -->
      <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
        <span class="text-2xl font-medium text-gray-900">45min</span>
        <span class="text-sm text-gray-500 mt-1">母乳时长</span>
      </div>

      <!-- 母乳喂养量 -->
      <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
        <span class="text-2xl font-medium text-gray-900">450ml</span>
        <span class="text-sm text-gray-500 mt-1">母乳喂养</span>
      </div>

      <!-- 配方奶喂养量 -->
      <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
        <span class="text-2xl font-medium text-gray-900">450ml</span>
        <span class="text-sm text-gray-500 mt-1">配方奶</span>
      </div>
    </div>

    <!-- <view v-else class="h-full flex items-center justify-center">
                <Empty />
              </view> -->
    <!-- <wd-loadmore v-if="tabIndex == 0" :state="state" @reload="loadmore" /> -->
    <wd-gap bg-color="#F2F2F2"></wd-gap>
    <view class="p-4 flex justify-between items-center">
      <text class="text-base">2020年12月15日</text>
      <text class="text-xs text-[#666]">2岁4个月4天</text>
    </view>

    <RecordList :dataList="records" />
    <!-- 悬浮添加按钮 -->
    <view
      @click="goToPage('')"
      style="box-shadow: 0px 2px 12px rgba(255, 184, 137, 0.5)"
      class="fixed right-4 bottom-25 w-12 h-12 bg-[#F88842] rounded-full flex items-center justify-center"
    >
      <wd-icon name="add" size="52rpx" color="white"></wd-icon>
    </view>
  </view>
</template>
<script setup>
  import HeightItem from '@/components/height/height-item.vue'
  import REcharts from '@/components/height/r-echarts.vue'
  import data from '@/components/feed-wd-popup/data.json'
  import Empty from '@/components/empty/empty.vue'
  import { ref } from 'vue'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import RecordList from '@/components/record-list/record-list.vue'
  const hList = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
  const wList = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]
  const tList = [0, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52]

  const tabList = ref(data)

  const tabIndex = ref(0)

  const xAxisData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
  const yAxisData = ref([])
  // const seriesData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
  const unit = ref('(cm)')
  const records = ref([
    {
      id: '0',
      type: 1,
      time: '13:00',
      title: '喂奶 200ml',
      desc: '宝宝今天胃口很好',

      recorder: '妈妈 王小美',
      // image: 'https://ai-public.mastergo.com/ai/img_res/3a46635d73b74316cd39813502beb964.jpg',
    },
    {
      id: '1',
      type: 2,
      time: '10:00-13:00',
      title: '母乳喂养',
      desc: '持续了30分钟',
      recorder: '妈妈 王小美',
      image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
    },
    {
      id: '2',
      type: 3,
      time: '10:00',
      title: '辅食 50ml',
      desc: '今天尝试了新的米糊，宝宝很喜欢',
      recorder: '妈妈 王小美',
      image: '',
    },
  ])
  // const parmas = ref({
  //   pageSize: 10,
  //   pageNum: 1,
  // })

  const state = ref('')
  const num = ref(0)
  const max = ref(10)

  function handleClickLeft() {
    uni.navigateBack()
  }

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

  const growthRecordList = ref([])
  // 获取生长记录
  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',
      },
      {
        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',
      },
      {
        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',
      },
      {
        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',
      },
      {
        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',
      },
      {
        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',
      },
      {
        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 loadmore() {
    let data = [
      {
        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',
      },
    ]
    setTimeout(() => {
      num.value = num.value + 3
      growthRecordList.value.push(...data)
      state.value = 'loading'
    }, 200)
  }

  onReachBottom(() => {
    if (num.value > 45) {
      state.value = 'finished'
    } else if (num.value < max.value) {
      loadmore()
    } else if (num.value === max.value) {
      state.value = 'finished'
    }
  })
  function changeIndex({ index, name }) {
    console.log('index: ', index)
    tabIndex.value = index
    nextTick(() => {
      if (index == 1) {
        yAxisData.value = hList
        unit.value = '(cm)'
      }
      if (index == 2) {
        yAxisData.value = wList
        unit.value = '(kg)'
      }
      if (index == 3) {
        yAxisData.value = tList
        unit.value = '(cm)'
      }
    })
  }

  onLoad(() => {
    getGrowthRecordList()
  })

  const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<style lang="scss" scoped>
  .content {
    line-height: 120px;
    text-align: center;
  }
</style>
