<template>
  <div class="bar-chart" ref="moneyChart" style="height: 400px"></div>
</template>

<script>
export default {
  name: "",
  props: {
    title: {
      type: String,
    },
    chartData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      dateList: "",
    };
  },
  watch: {
    chartData: {
      handler(newChart) {
        if (newChart.length == 2) {
          this.drawChart();
        }
      },
    },
  },
  methods: {
    drawChart() {
      const chart = this.$refs.moneyChart;
      const transformedData = this.chartData.map((item) => ({
        name: item.Name, // 将 Name 转换为 name
        value: item.Percentage, // 将 Percentage 转换为 value
        details: {
          Count: item.Count,
          Amount: item.Amount,
        },
      }));
      if (chart) {
        const myChart = echarts.init(chart);
        const option = {
          tooltip: {
            show: true,
            trigger: "item",
            formatter: function (params) {
              return `${params.name}${params.value}%`;
            },
          },
          legend: {
            // top: "0%",
            left: "center",
          },
          color: ["#409EFF", "#BDD7F1"],
          series: [
            {
              name: "",
              type: "pie",
              radius: "70%",
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: "outside",
                //position: "inner",
                formatter(params) {
                  const details = params.data.details;
                  console.log(params);
                  let str = details.Amount ? `付款金额：${details.Amount || ""}元` : "";
                  return `人数：${details.Count}人\n${str}`;
                },
                rich: {
                  title: {},
                  value: {},
                  detail: {},
                },
              },
              labelLine: {},
              data: transformedData,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
  created() {},
  mounted() {
    // this.$nextTick(() => {
    //   this.drawChart();
    // });
  },
};
</script>
<style lang="scss" scoped></style>
