<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>
    <!-- :swipeable="true"   :slidable-num="4"-->
    <wd-tabs
      style="--wot-tabs-nav-height: 96rpx"
      sticky
      slidable="auto"
      v-model="tabIndex"
      color="#F88842"
      @change="changeIndex"
      inactiveColor="#666666"
    >
      <block class="h-full" v-for="(item, index) in tabList" :key="'tabs' + item.id">
        <wd-tab :title="item.title">
          <REcharts :id="echartsItem.id + index" :seriesData="echartsItem?.seriesData" :unit="unit">
            <template #default>
              <view class="absolute right-4 top-7 text-xs text-[#333]">
                <template v-if="handleColumns(echartsItem?.columns)">
                  <SwitchBtn
                    v-model:show="show"
                    :columns="echartsItem?.columns"
                    :seriesData="echartsItem?.seriesData"
                    @handleList="handleList"
                  />
                </template>
                <template v-else>
                  {{ echartsItem?.columns }}
                </template>
              </view>
            </template>
          </REcharts>
        </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 天平均每天{{ informText }}
    </view>

    <!-- 数据统计区域 -->
    <view v-if="bannerList.length" class="flex justify-between items-center mx-4 mb-3">
      <view
        v-for="(item, index) in bannerList"
        :key="'bannerList' + item.value"
        class="bg-white px-4 flex flex-1 flex-col items-center justify-center shadow-sm"
      >
        <text class="text-base text-[#333]">{{ item.count }}</text>
        <text class="text-xs text-[#666] mt-1">{{ item.label }}</text>
      </view>
    </view>

    <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 v-if="records.length" :dataList="records" />
    <view v-else class="h-full flex items-center justify-center">
      <Empty />
    </view>
    <!-- <wd-loadmore v-if="tabIndex == 0" :state="state" @reload="loadmore" /> -->

    <!-- 悬浮添加按钮 -->
    <HoverButton
      @onButton="
        () => {
          showPopup = !showPopup
        }
      "
    />
  </view>
  <FeedWdPopup v-model:show="showPopup" />
</template>
<script setup>
  import { ref } from 'vue'
  import { feedMethodList, cacationList } from '@/pages/record/data.js'
  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
  import SwitchBtn from '@/components/switch-btn/switch-btn.vue'
  import REcharts from '@/components/height/r-echarts.vue'
  import data from '@/components/feed-wd-popup/data.json'
  import HoverButton from '@/components/hover-button/hover-button.vue'
  import Empty from '@/components/empty/empty.vue'
  import RecordList from '@/components/record-list/record-list.vue'
  import FeedWdPopup from '@/components/feed-wd-popup/feed-wd-popup.vue'
  const ML = '(ml)'
  const CI = '(次)'
  const HOUR = '(小时)'
  const MINUTE = '(分钟)'

  const hList = [0, 1, 2, 3, 4, 5, 6]

  const tabList = ref(data)
  const bannerList = ref([])
  const informText = ref('')
  const tabIndex = ref(0)

  // 图表上面的 按钮切换是否显示
  const show = ref(false)
  const showPopup = ref(false)
  const yAxisData = ref([])
  const unit = ref('(cm)')
  // 列表数据
  const records = ref([
    {
      id: '0',
      type: 1,
      time: '13:00',
      title: '喂奶 200ml',
      desc: '宝宝今天胃口很好',
      imageCount: 0,
      recorder: '妈妈 王小美',
      // image: 'https://ai-public.mastergo.com/ai/img_res/3a46635d73b74316cd39813502beb964.jpg',
      image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
    },
    {
      id: '1',
      type: 2,
      time: '10:00-13:00',
      title: '母乳喂养',
      desc: '持续了30分钟',
      recorder: '妈妈 王小美',
      imageCount: 2,
      image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
    },
    {
      id: '2',
      type: 3,
      time: '10:00',
      title: '辅食 50ml',
      desc: '今天尝试了新的米糊，宝宝很喜欢',
      recorder: '妈妈 王小美',
      imageCount: 0,
      image: '',
    },
  ])

  // 图表数组
  const echartsItem = ref({
    id: 'echarts',
    columns: ['喂奶次数', '喂奶量'],
    seriesData: [120, 200, 150, 80, 70, 110, 130],
    yAxisData: [],
    // unit
  })

  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}`,
    })
  }

  // 是显示切换的按钮
  function handleColumns(params) {
    if (Array.isArray(params)) {
      return true
    } else {
      return false
    }
  }

  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 handleSwitch(index) {
    let data = []
    switch (index) {
      case 0:
        yAxisData.value = hList
        informText.value = show.value ? '喂奶400ml' : '喂奶7次'
        unit.value = show.value ? ML : CI

        echartsItem.value = {}

        if (show.value) {
          data = ['40min', '4000ml', '400ml']
          bannerList.value = feedMethodList.map((item, index) => ({
            ...item,
            count: data[index],
          }))
        } else {
          data = ['1次', '4次', '2次']
          bannerList.value = feedMethodList.map((item, index) => ({
            ...item,
            count: data[index],
          }))
        }

        echartsItem.value = {
          id: 'echarts',
          columns: ['喂奶次数', '喂奶量'],
          seriesData: [120, 200, 150, 80, 70, 110, 130],
          yAxisData: [],
          // unit
        }

        break
      case 1:
        yAxisData.value = hList
        informText.value = show.value ? '睡眠20小时' : '睡眠5次'
        unit.value = CI
        unit.value = HOUR
        echartsItem.value = {
          id: 'echarts',
          columns: ['睡眠次数', '睡眠时长'],
          seriesData: [120, 200, 150, 80, 70, 110, 130],
          yAxisData: [],
          // unit
        }
        bannerList.value = []
        break
      case 2:
        yAxisData.value = hList
        unit.value = CI
        informText.value = '换尿布3次'
        data = ['1次', '2次']
        bannerList.value = cacationList.map((item, index) => ({
          ...item,
          count: data[index],
        }))

        echartsItem.value = {
          id: 'echarts',
          columns: '换尿布次数',
          seriesData: [120, 200, 150, 80, 70, 110, 130],
          yAxisData: [],
          // unit
        }

        break
      case 3:
        yAxisData.value = hList
        unit.value = CI
        informText.value = '辅食1次'
        bannerList.value = []
        echartsItem.value = {
          id: 'echarts',
          columns: '辅食次数',
          seriesData: [120, 200, 150, 80, 70, 110, 130],
          yAxisData: [],
          // unit
        }
        break
      case 4:
        yAxisData.value = hList
        unit.value = CI
        unit.value = ML

        informText.value = show.value ? '吸奶300ml' : '吸奶5次'
        bannerList.value = []

        echartsItem.value = {
          id: 'echarts',
          columns: ['吸奶次数', '吸奶量'],
          seriesData: [120, 200, 150, 80, 70, 110, 130],
          yAxisData: [],
          // unit
        }

        break
      case 5:
        yAxisData.value = hList
        unit.value = MINUTE
        informText.value = '洗澡10分钟'
        bannerList.value = []
        echartsItem.value = {
          id: 'echarts',
          columns: '洗澡时间',
          seriesData: [120, 200, 150, 80, 70, 110, 130],
          yAxisData: [],
          // unit
        }

        break
      case 6:
        yAxisData.value = hList
        unit.value = MINUTE
        informText.value = '游泳10分钟'
        bannerList.value = []

        echartsItem.value = {
          id: 'echarts',
          columns: '游泳时间',
          seriesData: [120, 200, 150, 80, 70, 110, 130],
          yAxisData: [],
          // unit
        }
        break

      default:
        break
    }
  }

  // tabs 切换
  function changeIndex({ index, name }) {
    tabIndex.value = index
    handleSwitch(index)
  }

  // 图表的切换
  function handleList() {
    handleSwitch(tabIndex.value)
  }

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

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

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