<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"
      inactiveColor="#666666"
    >
      <block class="h-full" v-for="(item, idnex) in tabList" :key="'tabs' + index">
        <wd-tab :title="item">
          <template v-if="tabIndex === 0">
            <view style="height: calc(100vh - 194rpx); border: 1px solid red" class="w-full">
              <template v-if="growthRecordList.length">
                <HeightItem
                  v-for="(item, index) in growthRecordList"
                  :key="item.id + index"
                  :item="item"
                  @goToGrowthPage="goToPage(item.id)"
                />
              </template>

              <view v-else class="h-full flex items-center justify-center">
                <Empty />
              </view>
            </view>

            <wd-loadmore v-if="tabIndex == 0" :state="state" @reload="loadmore" />
          </template>
        </wd-tab>
      </block>
    </wd-tabs>
    <HEcharts v-if="tabIndex === 1" />
    <!-- 悬浮添加按钮 -->
    <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 HEcharts from '@/components/height/h-echarts.vue'

  import Empty from '@/components/empty/empty.vue'
  import { ref } from 'vue'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'

  const tabList = ref(['记录列表', '身高曲线', '体重曲线', '头围曲线'])

  const tabIndex = ref(0)

  // 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',
      },
    ]
    data = []
    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'
    }
  })

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

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

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