<template>
  <div class="pie-chart-container">
    <dv-charts v-if="option" :option="option" />
    <div v-else>Loading chart...</div>
  </div>
</template>

<script>
import { concle_count } from "@/api/knowledge";
export default {
  name: "PieChart",
  data() {
    return {
      option: null,
      data: [
        { name: "文档", value: 70 },
        { name: "模版", value: 46 },
        { name: "知识库文档", value: 23 },
        { name: "公式", value: 15 },
        { name: "变量", value: 67 },    
      ],
      refreshInterval: null,
      isOnDashboard: false,
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(newRoute) {
        this.isOnDashboard = newRoute.path === '/dashboard';
        this.handleRouteChange();
      }
    }
  },
  mounted() {
    this.init();
    /* this.refreshInterval = setInterval(() => {
      this.init();
    }, 30000); */
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
  methods: {
    handleRouteChange() {
      if (this.isOnDashboard) {
        this.init();
      } 
    },
    initChart() {
      const filteredData = this.data.filter((item) => item.value > 0);
      this.option = {
        series: [
          {
            type: "pie",
            data: filteredData,
            radius: "55%",
            insideLabel: {
              show: true,
            },
            outsideLabel: {
              show: true,
              formatter: "{name}",/*  {percent}% */
            },
          },
        ],
        color: [
          "#FF9F43",
          "#5E60CE",
          "#FF6B6B",
          "#54A0FF",
          "#FF4DFF",
          "#FF9F43",
          "#1DD1A1",
        ],
      };
    },
    init() {
      concle_count().then((res) => {
        this.data[0].value = res.data.dc_document.non_templates;
        this.data[1].value = res.data.dc_document.templates;
         this.data[2].value = res.data.kbm_document;
        this.data[3].value = res.data.dc_formula;
        this.data[4].value = res.data.dc_params;
       
        this.$nextTick(() => {
          this.initChart();
        });
      });
    },
  },
};
</script>

<style scoped>
.pie-chart-container {
  width: 100%;
  height: 400px;
  max-width: 800px;
  margin: 0 auto;
}
</style>
<!-- <template>
  <div ref="chartDiv" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

export default {
  name: 'AmLineChart',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      root: null
    }
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.root) {
      this.root.dispose();
    }
  },
  methods: {
    initChart() {
      // Create root element
      this.root = am5.Root.new(this.$refs.chartDiv);

      // Set themes
      this.root.setThemes([am5themes_Animated.new(this.root)]);

      // Create chart
      this.chart = this.root.container.children.push(
        am5xy.XYChart.new(this.root, {
          panX: true,
          panY: true,
          wheelX: "panX",
          wheelY: "zoomX",
          pinchZoomX: true
        })
      );

      // Add cursor
      this.chart.set("cursor", am5xy.XYCursor.new(this.root, {
        behavior: "none"
      }));

      // Create axes
      const xAxis = this.chart.xAxes.push(
        am5xy.CategoryAxis.new(this.root, {
          categoryField: "category",
          renderer: am5xy.AxisRendererX.new(this.root, {}),
          tooltip: am5.Tooltip.new(this.root, {})
        })
      );

      const yAxis = this.chart.yAxes.push(
        am5xy.ValueAxis.new(this.root, {
          renderer: am5xy.AxisRendererY.new(this.root, {})
        })
      );

      // Add series
      const series = this.chart.series.push(
        am5xy.LineSeries.new(this.root, {
          name: "Series",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "value",
          categoryXField: "category",
          tooltip: am5.Tooltip.new(this.root, {
            labelText: "{valueY}"
          })
        })
      );

      // Add animated bullets
      series.bullets.push(() => {  // 修改这里：使用箭头函数
        return am5.Bullet.new(this.root, {
          locationY: 0,
          sprite: am5.Circle.new(this.root, {
            radius: 5,
            fill: series.get("fill"),
            stroke: this.root.interfaceColors.get("background"),
            strokeWidth: 2
          })
        });
      });

      // Set data
      xAxis.data.setAll(this.data);
      series.data.setAll(this.data);

      // Make stuff animate on load
      series.appear(1000);
      this.chart.appear(1000, 100);
    }
  }
}
</script> -->