<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import Empty from '@/components/Empty/index.vue'
import ChildrenBox from './components/childrenBox.vue'

import type { ChildrenType } from '@/pages/mine/interface'
import './index.scss'
import { storeToRefs } from 'pinia'
import { useBadgeStore } from '@/store/badge'
import { useChildStore } from '@/store/child'
import hud from '@/utils/hud'
import { getStudentStudyDataApi } from '@/api'

const childStore = useChildStore()
const { getChildren } = childStore
const { children } = storeToRefs(childStore)
const { refreshBadge } = useBadgeStore()

const empty = ref(false)
const showChild = ref<ChildrenType>() // 展示的孩子

onShow(() => {
  Promise.all([getChildren(), refreshBadge()])
    .then(() => {
      if (!children.value?.length) return
      showChild.value = children.value[0]
    })
    .finally(() => {
      hud.hide()
    })

  // 查询学习数据
  getStudentStudyDataApi({
    queryType: 1,
    queryRangeFlag: 1,
  })
})

onMounted(() => {
  hud.loading()
})
</script>

<template>
  <mj-page class="page">
    <ChildrenBox :list="children" :showItem="showChild" />
    <Empty v-if="empty" content="暂无学情报告数据哦~" />
  </mj-page>
</template>
