<template>
  <view class="report">
    <wd-skeleton v-if="isLoading" animation="gradient" theme="paragraph" />
    <template v-else>
      <report-time-change v-model:value="currentDate" />
      <view class="report-box">
        <student-report v-if="reportData" :report="reportData" />
        <empty v-else content="还未开课，暂无报告数据哦～" />
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import ReportTimeChange from './ReportTimeChange.vue';
import { computed, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getInspectorPlanReport } from '@/api';
import StudentReport from '@/components/student-report';
import dayjs from 'dayjs';
import Empty from '@/components/Empty';

const currentDate = ref(dayjs());

const result = ref([]);

const isLoading = ref(true);

onLoad(options => {
  getInspectorPlanReport({ userId: options.id })
    .then(({ data }) => {
      result.value = data.map(item => {
        return {
          ...item,
          knowledgeGraphStatistics: JSON.parse(item.knowledgeGraphStatistics),
          learnedKnowledge: JSON.parse(item.learnedKnowledge),
          practiceQuestionStatistics: JSON.parse(item.practiceQuestionStatistics),
          watchVideoStatistics: JSON.parse(item.watchVideoStatistics),
          tasks: (item.tasks || []).map(task => JSON.parse(task.taskInfoJson)),
        };
      });
      currentDate.value = dayjs(data[0].courseDate);
    })
    .finally(() => {
      isLoading.value = false;
    });
});

const reportData = computed(() => {
  return result.value.find(
    item => dayjs(item.courseDate).format('YYYY-MM-DD') === currentDate.value.format('YYYY-MM-DD'),
  );
});
</script>

<style scoped lang="scss">
.report {
  padding-bottom: 122rpx;
  .report-box {
    background-color: #fff;
    padding: 20rpx 30rpx;
    border-radius: 20rpx;
  }
}
</style>
