<template>
  <report-content-base>
    <view class="chart_title">
      <text class="txt">知识图谱统计</text>
      <view class="underline"></view>
    </view>
    <view class="k-g-s-title">我的知识图谱变化情况</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="data" />
    <!-- <qy-echarts-add-lower
      v-if="data.length > 0"
      html-id="knowledge-graph-stats-echarts"
      :data="data"
    /> -->
  </report-content-base>
</template>
<script setup lang="ts">
import ColumnChart from '@/pages/academicReport/components/Echart/ColumnChart.vue';
import ReportContentBase from '@/pages/inspector/student-detail/components/report-content-base.vue';
import { computed, ref } from 'vue';

const props = defineProps<{
  knowledgeGraphStatistics: any;
}>();

const data: any = computed(() => {
  if (!props.knowledgeGraphStatistics) {
    return {};
  }
  return {
    categories: ['陌生数', '熟悉数', '掌握数'],
    series: [
      {
        data: [
          {
            color: props.knowledgeGraphStatistics.unfamiliarCount < 0 ? '#ff8074' : '#3fd15f',
            value: Math.abs(props.knowledgeGraphStatistics.unfamiliarCount),
          },
          {
            color: props.knowledgeGraphStatistics.knowCount < 0 ? '#ff8074' : '#3fd15f',
            value: Math.abs(props.knowledgeGraphStatistics.knowCount),
          },
          {
            color: props.knowledgeGraphStatistics.graspCount < 0 ? '#ff8074' : '#3fd15f',
            value: Math.abs(props.knowledgeGraphStatistics.graspCount),
          },
        ],
      },
    ],
  };
});
</script>
<style scoped lang="scss">
.chart_title {
  position: relative;
  margin: auto;
  width: 204rpx;
  height: 60rpx;
  font-size: 34rpx;
  font-weight: 600;
  line-height: 60rpx;
  text-align: center;
  color: #000000;
  .txt {
    position: absolute;
    display: block;
    z-index: 99;
  }
  .underline {
    position: absolute;
    bottom: 8rpx;
    left: 0;
    width: 100%;
    height: 12rpx;
    background-color: #dad9ff;
  }
}
.chart_label {
  display: flex;
  justify-content: center;
  font-size: 26rpx;
  color: rgba(102, 102, 102, 1);

  .iden_color {
    display: inline-block;
    width: 30rpx;
    height: 8rpx;
    margin-right: 4rpx;
  }

  .increase {
    display: flex;
    align-items: center;
    margin-right: 16rpx;

    .iden_color {
      background-color: #3fd15f;
    }
  }

  .decrease {
    display: flex;
    align-items: center;

    .iden_color {
      background-color: #ff8074;
    }
  }
}
.k-g-s-title {
  margin: 50rpx auto 30rpx;
  color: #333333;
  text-align: center;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 48rpx; /* 150% */
}

.type-view {
  display: flex;
  gap: 20rpx;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;

  svg {
    width: 32rpx;
    height: 16rpx;
  }
}
</style>
