<template>
  <div>
    <div
      ref="ringChart"
      class="ringChart"
      style="width: 290px; height: 250px"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// import { listAlgConfig } from "@/api/system/algConfig";

export default {
  name: "RingChart",
  props: {
    total: {
      type: Number,
      require: true,
    },
    agloTypeData: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      // 总数量
      totalAll: 0,
      chart: null,
      option: null,
      data: null,
      // agloTypeData: [],
    };
  },
  mounted() {
    // this.getTotal();
    this.$nextTick(() => {
      this.ringChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // 获取总条数
    getTotal() {
      this.queryParams = { pageNum: 1, pageSize: 1000 };
      listAlgConfig(this.queryParams).then((response) => {
        this.total = response.total;
        const typeFrequency = response.rows.map((item) => {
          return item.algType;
        });
        console.log("typeFrequency", typeFrequency);
        const countedTypeFrequency = typeFrequency?.reduce((obj, name) => {
          if (name in obj) {
            obj[name]++;
          } else {
            obj[name] = 1;
          }
          return obj;
        }, {});

        const agloType = this.dict.type.biz_alg_type;
        for (let key in this.dict.type.biz_alg_type) {
          this.agloTypeData.push({
            value: countedTypeFrequency[key],
            name: agloType[key].label,
          });
        }
        this.ringChart();
      });
    },

    ringChart() {
      this.totalAll = this.total;
      var chartDom = this.$refs.ringChart;
      this.chart = echarts.init(chartDom);
      this.option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          x: "left", //可设定图例在左、右、居中
          y: "top",
          padding: [0, 0, 30, 0],
          textStyle: {
            //图例文字的样式
            color: "#fff",
          },
        },
        title: {
          text: "算法总数",
          subtext: this.totalAll,
          textStyle: {
            fontSize: 16,
            color: "#fff",
            fontWeight: 400,
          },
          subtextStyle: {
            fontSize: 24,
            fontWeight: 700,
            color: "rgb(50,197,233)",
          },
          left: "center", // 文字水平居中
          top: "40%", // 文字垂直居中
        },
        series: [
          {
            name: "算法",
            type: "pie",
            radius: ["45%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 24,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.agloTypeData,
          },
        ],
      };
      this.chart.on("mousemove", (params) => {
        if (params.data) {
          this.option.title.text = " ";
          this.option.title.subtext = " ";
          this.chart.setOption(this.option);
        }
      });

      this.chart.on("mouseout", () => {
        this.option.title.text = "算法总数";
        this.option.title.subtext = this.totalAll;
        this.chart.setOption(this.option);
      });
      this.option && this.chart.setOption(this.option);
    },
  },
};
</script>

<style scoped></style>
