<script setup>
import { ref, watch, onUnmounted, nextTick } from 'vue'
import Highcharts from 'highcharts';

const props = defineProps({
  title: {
    type: String,
  },
  chartData: {
    type: Array,
    default: [],
  },
})

const dateList = ref('')
const moneyChart = ref(null)
function drawChart() {
  const chart = moneyChart.value;
  const transformedData = props.chartData.map((item) => ({
    name: item.Name, // 将 Name 转换为 name
    y: item.Percentage, // 将 Percentage 转换为 value
    details: {
      Count: item.Count,
      Amount: item.Amount,
    },
  }));
  if (chart) {
    const option = {
      colors: ["#409EFF", "#BDD7F1"],
      credits: {
        enabled: false,
      },
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        backgroundColor: 'transparent',
      },
      legend: {
        align: "center",
        verticalAlign: "top",
      },
      title: {
        text: ''
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.y}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          showInLegend: true,
          dataLabels: {
            enabled: true,
            formatter() {
              const details = this.point.details;
              let str = details.Amount ? `付款金额：${details.Amount || ""}元` : "";
              return `人数：${details.Count}人<br/>${str}`;
            }
          }
        }
      },
      series: [{
        name: '',
        colorByPoint: true,
        data: transformedData
      }]
    }

    Highcharts.chart('chartBox', option)
  }
}

onUnmounted(() => {

})

watch(() => props.chartData, (newChart) => {
  if (newChart.length == 2) {

    nextTick(() => {
      drawChart();
    })
  }
})






</script>

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