<template>
    <div class="hc-round-chart-box">
        <div ref="echart" class="hc-round-chart-echarts" />
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
    datas: {
        type: Object,
        default: () => ({}),
    },
    config: {
        type: Object,
        default: () => ({
          
        }),
    },
})

// 定义事件
const emit = defineEmits(['chartClick'])
let chart = null
const echart = ref(null)

// 监听数据变化
watch(() => props.datas, (newVal) => {
    if (newVal) {
        setDatas(newVal)
    }
}, { deep: true })

// 初始化图表
const initChart = () => {
    chart = echarts.init(echart.value)
    setDatas(props.datas)
}

// 设置数据
// ... existing code ...
const setDatas = (data) => {
    const chartData = []
    const { name, key, stageTotalVos } = props.config
    
 
    
    for (let i = 0; i < name.length; i++) {
        chartData.push({
            name: name[i],
            value: data[key[i]] || 0,
            stageTotalVos: stageTotalVos[i]?.stageTotalVos || [], 
            type:key[i],
            // 添加stageTotalVos数据
        })
    }
    
    setOptions(chartData)
}
// ... existing code ...

// 设置图表配置
const setOptions = (chartData) => {
    const { color, label, name } = props.config
  
    
    chart.setOption({
        
        legend: {
            top: '6',
            data: name,
            textStyle: {
                color: '#fff',
            },
        },
        color: color,
        tooltip: {
            trigger: 'item',
            position: 'right',
            formatter: (params) => {
                return `<div style="padding: 8px;">
                    <div style="margin-bottom: 4px;">项目数：<span style="font-weight: bold; font-size: 16px;">${params.data.value}</span></div>
                    ${params.data.stageTotalVos?.map(item => `<div>${item.stageName}：<span style="font-weight: bold; font-size: 16px;">${item.count}</span></div>`).join('') || ''}
                </div>`
            },
            backgroundColor: '#fff',
            borderColor: '#E8E8E8',
            borderWidth: 1,
            textStyle: {
                color: '#333',
                fontSize: 14,
            },
            padding: 0,
            borderRadius: 4,
            extraCssText: 'box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);',
        },
        series: [{
            name: label,
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
                borderRadius: 10,
                borderWidth: 2,
            },
            labelLine: {
                show: false,
            },
            label: {
                show: false,
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: 20,
                    fontWeight: 'bold',
                },
            },
            data: chartData,
        }],
    })

    // 添加点击事件监听
    chart.on('click', (params) => {
        emit('chartClick', {
            name: params.name,
            value: params.value,
            dataIndex: params.dataIndex,
            type: params.data.type,
         
        })
    })
}

// 监听窗口大小变化
const handleResize = () => {
    chart && chart.resize()
}

// 组件挂载
onMounted(() => {
    nextTick(() => {
        initChart()
        window.addEventListener('resize', handleResize)
    })
})

// 组件卸载
onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    if (chart) {
        chart.dispose()
        chart = null
    }
})

// 暴露方法
defineExpose({
    resize: handleResize,
})
</script>

<style lang="scss" scoped>
.hc-round-chart-box {
    width: 100%;
    height: 100%;
    position: relative;
    
    .hc-round-chart-echarts {
        width: 100%;
        height: 100%;
    }
}
</style>