<template>
  <a-card :class="$style.statistics">
    <sd-echart ref="echart" :options="option" autoresize :class="$style.echart" />
  </a-card>
</template>

<script>
import 'echarts/lib/chart/treemap'
import KmKnowledageService from '../km-knowledage-service'

import components from './_import-components/km-category-statistics-import'

export default {
  name: 'KmCategoryStatistics',
  metaInfo: {
    title: '知识分类统计',
  },
  components,
  data() {
    return {
      option: {
        series: [
          {
            name: '知识分类',
            type: 'treemap',
            leafDepth: 1,
            drillDownIcon: '↓',
            data: [],
            label: {
              formatter: '{b}\n\r\r\r{c}',
              fontSize: 16,
              position: ['10%', '50%'],
              // align: 'left',
            },
            breadcrumb: {
              left: 0,
              top: 0,
              height: 30,
              itemStyle: {
                shadowBlur: 0,
                textStyle: {
                  fontSize: 16,
                },
              },
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 3,
              gapWidth: 3,
            },
          },
        ],
      },
    }
  },
  mounted() {
    this.fnGetTreeData()
  },
  methods: {
    fnGetTreeData() {
      this.$refs.echart.showLoading()
      KmKnowledageService.getKnowledgeTree({ pageId: 'categoryStatistics' }).then((res) => {
        this.option.series[0].data = res.data[0].children
        this.$refs.echart.hideLoading()
        this.$refs.echart.refresh()
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.statistics {
  .echart {
    width: 100%;
    height: calc(100vh - 195px);
  }
}
</style>
