<template>
  <!-- 知识图谱统计 -->
  <view class="single_box knowledge_mapping">
    <view class="title">知识图谱统计</view>
    <isp-data-load :loading="loading" :empty="empty" emptyText="暂无数据">
      <view class="chart_show">
        <RingChart :chartData="ringDate" />
      </view>
      <view class="date_filter_box">
        <DateFilter :dateType="dateType" @filter="i => handleFilterDate(i)" />
      </view>
      <view class="title2">我的知识图谱变化情况</view>
      <view class="chart_label">
        <view class="increase"><text class="iden_color"></text>增加</view>
        <view class="decrease"><text class="iden_color"></text>减少</view>
      </view>
      <ColumnChart :chartData="knowledgeAcquisition" />
      <view class="grasp_table">
        <view class="title2">已学知识点及掌握程度</view>
        <LearningGraspTable :tableList="showData.knowledgeList" />
      </view>
    </isp-data-load>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import DateFilter from './dateFilter.vue';
import RingChart from './Echart/RingChart.vue';
import ColumnChart from './Echart/ColumnChart.vue';
import LearningGraspTable from './learningGraspTable.vue';

import '../index.scss';
import { knowledgeStudyStatApi } from '@/api';

const props = withDefaults(
  defineProps<{
    subjectId: number | string;
    userId: string;
  }>(),
  {
    subjectId: 0,
    userId: '',
  },
);
const emits = defineEmits(['change']);
const loading = ref(false);
const dateType = ref(0);
const empty = ref(false);
const showData = ref({
  bar: {
    studyDate: '',
    unKnownNum: 0,
    knownNum: 0,
    masteredNum: 0,
    unKnownChangeNum: 0,
    knownChangeNum: 0,
    masteredChangeNum: 0,
  },
  knowledgeList: [
    {
      createTime: '',
      createUser: '',
      updateTime: '',
      updateUser: '',
      id: '',
      userId: '',
      subjectId: '',
      knowledgeId: '',
      knowledgeName: '',
      answerCount: 0,
      correctCount: 0,
      masteryDegree: 0,
      recommendedNum: 0,
    },
  ],
  ringList: [
    {
      count: '',
      masteryDegree: '',
      percentage: '',
      totalCount: '',
    },
  ],
});
const ringDate = ref({
  series: [
    {
      data: [],
    },
  ],
});
const knowledgeAcquisition = ref({
  categories: ['陌生数', '熟悉数', '掌握数'],
  series: [
    {
      data: [],
    },
  ],
});

async function fetchChartData() {
  if (props.subjectId === 0) {
    empty.value = true;
    return;
  }
  empty.value = false;
  try {
    loading.value = true;
    const { data } = await knowledgeStudyStatApi({
      dateType: dateType.value,
      subjectId: props.subjectId,
      userId: props.userId,
    });

    showData.value = data;
    knowledgeAcquisition.value.series[0].data = [
      {
        color:
          showData.value.bar.unKnownChangeNum < 0
            ? 'rgba(248, 104, 96, 1)'
            : 'rgba(69, 203, 70, 1)',
        value: Math.abs(showData.value.bar.unKnownChangeNum),
      },
      {
        color:
          showData.value.bar.knownChangeNum < 0 ? 'rgba(248, 104, 96, 1)' : 'rgba(69, 203, 70, 1)',
        value: Math.abs(showData.value.bar.knownChangeNum),
      },
      {
        color:
          showData.value.bar.masteredChangeNum < 0
            ? 'rgba(248, 104, 96, 1)'
            : 'rgba(69, 203, 70, 1)',
        value: Math.abs(showData.value.bar.masteredChangeNum),
      },
    ];
    ringDate.value.series[0].data = [
      {
        name: '熟悉',
        value: showData.value.ringList.find(item => Number(item.masteryDegree) === 3)?.count || 0,
        color: '#7e6eff',
      },
      {
        name: '掌握',
        value: showData.value.ringList.find(item => Number(item.masteryDegree) === 2)?.count || 0,
        color: '#ff877f',
      },
      {
        name: '陌生',
        value: showData.value.ringList.find(item => Number(item.masteryDegree) === 1)?.count || 0,
        color: '#ffa443',
      },
      {
        name: '待点亮',
        value: showData.value.ringList.find(item => Number(item.masteryDegree) === 0)?.count || 0,
        color: '#e2e2e2',
      },
    ];
  } finally {
    loading.value = false;
  }
}
function handleFilterDate(i) {
  dateType.value = i.value;
  fetchChartData();
}
watch(
  () => props.subjectId,
  val => {
    dateType.value = 0;
    fetchChartData();
  },
);
</script>
<style lang="scss" scoped>
.chart_show {
  margin-bottom: 50rpx;
}
</style>
