<template>
    <v-chart ref="saleChartRef" style="height: 420px" :option="options" />
</template>
<script setup>
    import VChart from 'vue-echarts';
    import { use } from 'echarts/core';
    import { CanvasRenderer } from 'echarts/renderers';
    import { PieChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        ToolboxComponent
    } from 'echarts/components';
    import { ref, reactive, defineExpose } from 'vue';
    import request from '@/utils/request';

    // 按需加载echarts
    use([
        CanvasRenderer,
        PieChart,
        GridComponent,
        TooltipComponent,
        LegendComponent
    ]);

    const options = reactive({
        legend: {
            top: 'bottom'
        },
        series: [
            {
                name: '取消原因分布',
                type: 'pie',
                radius: [50, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                label: {
                    formatter: '{b}: {c} ({d}%)'
                },
                data: [
                    { value: 0, name: '快递不取件' },
                    { value: 0, name: '快递不上门' },
                    { value: 0, name: '时间不合适' },
                    { value: 0, name: '发现更贵的平台' },
                    { value: 0, name: '不想卖了' },
                    { value: 0, name: '信息填写错误' },
                    { value: 0, name: '以上都不是' }
                ]
            }
        ]
    });

    // 更新图表数据
    const updateChartData = (data) => {
        if (!data || !data.reasonList) return;

        // 假设API返回的数据格式是reasonList数组，每项包含reason和count
        const chartData = data.reasonList.map((item) => ({
            value: item.count,
            name: item.reason
        }));

        options.series[0].data = chartData;
    };

    // 暴露更新方法给父组件使用
    defineExpose({
        updateChartData
    });
</script>
