<template>
  <view class="situation-item">
    <view class="situation-item-title">知识图谱统计</view>
    <qy-echarts-circle html-id="knowledge-atlas" :data="practiseData" />

    <duration-select v-model:value="currentDuration" />
    <view>
      <view class="knowledge-title-view">我的知识图谱变化情况</view>
      <qy-echarts-add-lower html-id="knowledge-atlas-echarts" :data="changeData" />
    </view>

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

<script setup lang="ts">
import DurationSelect from '@/pages/inspector/student-detail/components/study-situation-report/duration-select.vue';
import { computed, inject, ref, watchEffect } from 'vue';
import { queryStudyKnowledge } from '@/api/inspector/student-detail';
import type { StudySituationParam } from '@/types/inspector/studentDetail';

const studySituationParam = inject<StudySituationParam>('studySituationParam');
const currentDuration = ref<number>(0);
const studyKnowledgeData = ref<any>({});

const masterDegreeMap = {
  0: '待点亮',
  1: '陌生',
  2: '熟悉',
  3: '掌握',
};
const practiseData = computed(() => {
  const ringList = studyKnowledgeData.value?.ringList ?? [];
  return ringList.map((item: any) => ({
    value: item.percentage,
    // 0-待点亮 1-陌生 2-熟悉 3-已掌握
    name: masterDegreeMap[item.masteryDegree],
  }));
});

const changeData = computed(() => {
  const barList = studyKnowledgeData.value?.barList ?? [];
  const _data = barList[0] ?? {};
  return [
    {
      text: '陌生数',
      value: Math.abs(props.knowledgeGraphStatistics.unKnownNum),
      isAdd: props.knowledgeGraphStatistics.unKnownChangeNum > 0,
    },
    {
      text: '熟悉数',
      value: Math.abs(props.knowledgeGraphStatistics.knownNum),
      isAdd: props.knowledgeGraphStatistics.knownChangeNum > 0,
    },
    {
      text: '掌握数',
      value: Math.abs(props.knowledgeGraphStatistics.masteredNum),
      isAdd: props.knowledgeGraphStatistics.masteredChangeNum > 0,
    },
  ];
});

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

const knowledgeStudyData = computed(() => {
  const knowledgeList = studyKnowledgeData.value?.knowledgeList ?? [];
  return knowledgeList.map((item: any) => ({
    name: item.knowledgeName,
    frequency: item.answerCount,
    mastery: masterDegreeMap[item.masteryDegree],
  }));
});
const queryData = async () => {
  if (!(currentDuration.value >= 0)) {
    return;
  }
  const { data } = await queryStudyKnowledge({
    ...studySituationParam.value,
    dateType: currentDuration.value,
  });
  studyKnowledgeData.value = data;
};

watchEffect(() => {
  const subjectId = studySituationParam.subjectId.value;
  if (!subjectId) {
    return;
  }
  queryData();
});
</script>

<style scoped lang="scss">
@import '@/styles/inspector/student-detail.scss';

.knowledge-title-view {
  color: #333333;
  text-align: center;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 50rpx 0 30rpx 0;
}
</style>
