<template>
  <report-content-base title="已学知识点及掌握程度">
    <qy-custom-table :columns="columns" :data="knowledgeStudyData" />
  </report-content-base>
</template>

<script setup lang="ts">
import ReportContentBase from '@/pages/inspector/student-detail/components/report-content-base.vue';
import { computed } from 'vue';

const props = withDefaults(
  defineProps<{
    learnedKnowledge: LearnedKnowledgeItem[];
  }>(),
  {},
);

interface LearnedKnowledgeItem {
  name: string;
  answerCount: number;
  masteryDegree: number;
}

const columns = [
  {
    key: 'name',
    title: '知识点名称',
  },
  {
    key: 'frequency',
    title: '答题频次',
  },
  {
    key: 'mastery',
    title: '掌握程度',
  },
];

const knowledgeStudyData = computed(() => {
  return (props.learnedKnowledge ?? []).map(item => {
    return {
      name: item.name,
      frequency: item.answerCount,
      // 1-陌生 2-熟悉 3-已掌握
      mastery: item.masteryDegree === 1 ? '陌生' : item.masteryDegree === 2 ? '熟悉' : '掌握',
    };
  });
});
</script>

<style scoped lang="scss"></style>
