<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"
      sticky
      v-model="tabIndex"
      color="#F88842"
      @change="changeIndex"
      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)" 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" :yAxisData="hList" :xAxisData="xAxisData" :unit="unit" />
    <HEcharts v-if="tabIndex === 2" :yAxisData="wList" :xAxisData="xAxisData" :unit="unit" />
    <HEcharts v-if="tabIndex === 3" :yAxisData="tList" :xAxisData="xAxisData" :unit="unit" />
    <!-- 悬浮添加按钮 -->
    <HoverButton @onButton="goToPage" />
  </view>
</template>
<script setup>
  import HeightItem from '@/components/height/height-item.vue'
  import HEcharts from '@/components/height/h-echarts.vue'
  import HoverButton from '@/components/hover-button/hover-button.vue'
  import Empty from '@/components/empty/empty.vue'
  import { ref } from 'vue'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'

  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(['记录列表', '身高曲线', '体重曲线', '头围曲线'])

  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 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>
