<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";
import { selectTypeList, structure_count } from "@/api/knowledge";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    kenValue: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      chart: null,
      chartData: [],
      dirList: [],
      currentKenId: null, // 新增：用于跟踪当前选中的知识库ID
    };
  },
  watch: {
    kenValue: {
      immediate: true,
      handler(val) {
        if (val && val.id !== this.currentKenId) {
          this.currentKenId = val.id;
          this.resetChart();
          this.procData(val);
        }
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      // 初始化空的图表配置
      this.updateChart([]);
    },
   /*  getColor(type) {
      const colorMap = {
        Document: "#FF7B7B",
        Video: "#9D96F5",
        Audio: "#4ADEDE",
        Image: "#FFA400",
        Text: "#5D7DFF",
        Other: "#4ADEDE",
      };
      return colorMap[type];
    }, */
    /* 处理数据 */
    resetChart() {
      if (this.chart) {
        this.chart.clear();
      }
      this.chartData = [];
    },

    procData(val) {
      if (!val || !val.directories) {
        /* console.error("Invalid input data"); */
        return;
      }

      this.chartData = val.directories.map((dir) => ({
        name: dir.name,
        ...dir.file_type_stats,
      }));

      if (val.other_files && val.other_files.file_type_stats) {
        this.chartData.push({
          name: "其他",
          ...val.other_files.file_type_stats,
        });
      }
      console.log(this.chartData);
      this.$nextTick(() => {
        this.updateChart(this.chartData);
      });
    },

    updateChart(data) {
      if (!this.chart) {
        console.error("Chart is not initialized");
        return;
      }

      const categories = data.map((item) => item.name);

      // 获取所有存在的文件类型
      const fileTypes = Array.from(
        new Set(data.flatMap((item) => Object.keys(item)))
      ).filter((key) => key !== "name");

      const series = fileTypes.map((type) => ({
        name: this.getFileTypeName(type),
        type: "bar",
        barWidth: "2%",
        data: data.map((item) => item[type] || 0),
        itemStyle: { color: this.getColor(type) },
      }));

      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        legend: {
          data: fileTypes.map(this.getFileTypeName),
          bottom: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          top: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: categories,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              interval: 0,
              align: "center",
              margin: 20,
              fontSize: 14,
            },
            splitLine: {
              show: true,
              lineStyle: { type: "dashed", color: "#ddd" },
            },
          },
        ],
        yAxis: [{ type: "value" }],
        series: series,
      });
    },

    getColor(type) {
      const colorMap = {
        jpg: "#54a0ff",
        png: "#9D96F5",
        gif: "#4ADEDE",
        mp4: "#FFA400",
        mp3: "#5D7DFF",
        pdf: "#FF6B6B",
        doc: "#4ECDC4",
        docx: "#4ECDC4",
        xls: "#45B7D1",
        xlsx: "#45B7D1",
        ppt: "#FF8C42",
        pptx: "#FF8C42",
        txt: "#6AB04C",
        other: "#95AFC0",
      };
      return colorMap[type] || "#95AFC0"; // 默认颜色
    },

    getFileTypeName(type) {
      const typeMap = {
        jpg: "JPG图片",
        png: "PNG图片",
        gif: "GIF图片",
        mp4: "MP4视频",
        mp3: "MP3音频",
        pdf: "PDF文档",
        doc: "Word文档",
        docx: "Word文档",
        xls: "Excel表格",
        xlsx: "Excel表格",
        ppt: "PPT演示",
        pptx: "PPT演示",
        txt: "文本文件",
        other: "其他文件",
      };
      return typeMap[type] || type;
    },

    /* 获取知识库目录 */
    init(val) {
      /* const tList={
        page: 1,
        pageSize: 9999,
        kb_id: val,
      }
      selectTypeList(tList).then(res=>{
        console.log(res);
        if(res.status!==200) return
        this.dirList=res.data.dataList
      }) */
      /* 获取汇总 */
    },
  },
};
</script>