<template>
  <view class="report_box">
    <!--  学习汇总  -->
    <study-summary :report="report" />
    <!--  督学计划完成情况  -->
    <plan-finish-data :tasks="report.tasks ?? []" />
    <horizontal-chart
      title="各学科练习题数统计"
      emptyText="暂无练习数据"
      :x-data="practiceQuestionStatistics.xData"
      :y-data="practiceQuestionStatistics.yData"
      html-id="practise-chart"
    />
    <horizontal-chart
      title="各学科观看视频统计"
      emptyText="暂无观看视频数据"
      :x-data="watchVideoStatistics.xData"
      :y-data="watchVideoStatistics.yData"
      html-id="video-see-chart"
    />
    <!--  知识图谱统计  -->
    <knowledge-graph-statistics :knowledge-graph-statistics="report.knowledgeGraphStatistics" />
    <!-- 已学知识点及掌握程度   -->
    <knowledge-mastery :learned-knowledge="report.learnedKnowledge || []" />
  </view>
</template>

<script setup lang="ts">
import StudySummary from '@/components/student-report/study-summary.vue';
import PlanFinishData from '@/components/student-report/plan-finish-data.vue';
import HorizontalChart from '@/components/student-report/horizontal-chart.vue';
import KnowledgeGraphStatistics from '@/components/student-report/knowledge-graph-statistics.vue';
import KnowledgeMastery from '@/components/student-report/knowledge-mastery.vue';
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{
    report: any;
  }>(),
  {
    report: {},
  },
);

const colors = [
  '#FB9FD5',
  '#D59FFB',
  '#9FA7FB',
  '#85DEFB',
  '#85FBDE',
  '#FBCA85',
  '#FB8F85',
  '#82F58B',
  '#F5EB82',
  '#7a6bff',
];
// 练习题统计
const practiceQuestionStatistics = computed(() => {
  const practiceQuestionStatistics = props.report.practiceQuestionStatistics ?? [];
  const yData = practiceQuestionStatistics.map((item: any) => item.subjectName);
  const xData = practiceQuestionStatistics.map((item: any) => {
    return { value: item.number, color: colors[Number(item.subjectId) - 1] };
  });
  return {
    yData,
    xData,
  };
});
// 观看视频统计
const watchVideoStatistics = computed(() => {
  const watchVideoStatistics = props.report.watchVideoStatistics ?? [];
  const yData = watchVideoStatistics.map((item: any) => item.subjectName);
  const xData = watchVideoStatistics.map((item: any) => item.number);
  return {
    yData,
    xData,
  };
});
console.log('督学报告', props.report);
</script>

<style scoped lang="scss">
.report_box {
  padding: 0 30rpx;
  box-sizing: border-box;
}
</style>
