<template>
  <view class="page">
    <ChildrenBox
      :list="childrenList"
      :showItem="showChildrenInfo"
      @updateShowItem="handleUpdateShowChild"
    />
    <Empty v-if="empty" content="暂无学情报告数据哦~" />
    <template v-else>
      <view class="single_box filter_box">
        <view class="title">学科选择</view>
        <subjectFilter
          :userId="showChildrenInfo?.childId"
          :tabsList="subjectList"
          @handleFilter="tapFilterSubject"
        />
      </view>
      <StudyTime :subjectId="chooseSubject?.subjectId" :userId="showChildrenInfo?.childId" />
      <VideoTime :subjectId="chooseSubject?.subjectId" :userId="showChildrenInfo?.childId" />
      <KnowledgeChart :subjectId="chooseSubject?.subjectId" :userId="showChildrenInfo?.childId" />
      <ExerciseStatistics
        :subjectId="chooseSubject?.subjectId"
        :userId="showChildrenInfo?.childId"
      />
      <LanguageStatistics
        :show="chooseSubject?.subjectId === 3"
        :userId="showChildrenInfo?.childId"
      />
    </template>

    <TabBar :selectedIndex="1" />
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import Empty from '@/components/Empty/index.vue';
import ChildrenBox from './components/childrenBox.vue';
import SubjectFilter from './components/subjectFilter.vue';
import TabBar from '@/components/Tabbar/index.vue';
import StudyTime from './components/studyTime.vue';
import VideoTime from './components/videoTime.vue';
import KnowledgeChart from './components/knowledgeChart.vue';
import ExerciseStatistics from './components/exerciseStatistics.vue';
import LanguageStatistics from './components/languageStatistics.vue';

import type { ChildrenType } from '@/pages/mine/interface';
import type { SubjectType, StudyTimeType } from './interface';
import './index.scss';
import { getParentBindChildApi, subjectApi } from '@/api';
import { user } from '@/store';
import { storeToRefs } from 'pinia';

const { userInfo } = storeToRefs(user());

const childrenList = ref<ChildrenType[]>(); // 所有孩子
const empty = ref(false);
const showChildrenInfo = ref<ChildrenType>(); // 展示的孩子
const subjectList = ref<SubjectType[]>(); // 学科

const chooseSubject = ref<SubjectType>(); // 选中学科

async function handleUpdateShowChild(val: ChildrenType) {
  showChildrenInfo.value = val;
  chooseSubject.value = {
    name: '',
    pictureUrl: '',
    subject: '',
    subjectId: undefined,
  };
  try {
    uni.showLoading({
      title: '加载中...',
    });
    await getSubject();
  } finally {
    uni.hideLoading();
  }
}
// 学科选择
function tapFilterSubject(i: SubjectType) {
  chooseSubject.value = i;
}

// 孩子列表
async function getParentBindChild() {
  const { data } = await getParentBindChildApi({ parentId: userInfo.value.id, size: -1 });
  empty.value = data.rows.length === 0 ? true : false;
  childrenList.value = data.rows;
  showChildrenInfo.value = data.rows[0];
}
// 学科列表
async function getSubject() {
  if (!showChildrenInfo.value.gradeId) {
    uni.showToast({
      title: '当前学生无年级,无法查看学情报告',
      icon: 'none',
    });
    subjectList.value = [];
    return;
  }
  const { data } = await subjectApi(showChildrenInfo.value.gradeId);
  subjectList.value = data;
  chooseSubject.value = data[0];
}
onMounted(async () => {
  try {
    uni.showLoading({
      title: '加载中...',
    });
    await getParentBindChild();
    await getSubject();

    uni.hideLoading();
  } catch (err) {
    uni.hideLoading();
  }
});
</script>
