<template>
    <div class="_consume">
        <HeadlineTag value="今日信息类型占比"></HeadlineTag>
        <div class="_consume_mains">
            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import HeadlineTag from '@/components/HeadlineTag';

const chartRef = ref(null);
let chart = null;

const generateRandomData = (length, max) => {
    const randomData = [];
    for (let i = 0; i < length; i++) {
        randomData.push(Math.floor(Math.random() * max));
    }
    return randomData;
};

const handleResize = () => {
    if (chart) {
        chart.resize();
    }
};

onMounted(() => {
    if (chartRef.value) {
        chart = echarts.init(chartRef.value);

        // 信息类型
        const infoTypes = ['紧急通知', '政策法规', '活动预告', '其他'];
        // 生成随机占比数据
        const randomData = generateRandomData(4, 100);
        const data = infoTypes.map((type, index) => ({
            name: type,
            value: randomData[index]
        }));

        const option = {
            // 添加动画效果
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicOut',
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                textStyle: {
                    color: '#fff'
                }
            },
            // 添加图例配置
            legend: {
                orient: 'horizontal', // 图例水平排列
                bottom: '0%', // 增大距离底部的距离，可根据需求调整
                left: 'center', // 水平居中
                data: infoTypes,
                textStyle: {
                    color: '#fff'
                }
            },
            series: [
                {
                    name: '信息类型',
                    type: 'pie',
                    data: data,
                    radius: ['40%', '70%'],
                    roseType: 'radius',
                    stillShowZeroSum: false,
                    itemStyle: {
                        color: (params) => {
                            const colorList = ['#4a90e2', '#50e3c2', '#f5a623', '#e35050'];
                            return colorList[params.dataIndex];
                        },
                        // 设置圆角
                        borderRadius: 10
                    },
                    emphasis: {
                        itemStyle: {
                            // 鼠标悬停时加大圆角
                            borderRadius: 12 
                        }
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {d}%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        },
                        distance: 20
                    },
                    labelLine: {
                        show: true,
                        length: 10,
                        length2: 20,
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                }
            ]
        };

        chart.setOption(option);
    }
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    if (chart) {
        chart.dispose();
    }
});
</script>

<style lang="scss">
._divider {
    height: 1px;
    border: 1px dashed #168cdb;
    flex: 1;
    margin: 0 10px;
}

._consume {
    display: flex;
    flex-direction: column;

    &_mains {
        margin: 10px 30px;
        flex: 1;
        display: flex;

        &_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;

            &_name {
                width: 30px;
                height: 30px;
                background: url("@/assets/images/content_circle_num.png");
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                // animation: scanning 4s linear infinite;
                border: 1px solid red;
            }

            &_flag {
                display: flex;
                align-items: center;
                gap: 3px;

                &_item {
                    width: 30px;
                    height: 30px;
                    border: 3px dashed #168cdb;
                    box-sizing: border-box;
                    background: #0e6ead;
                    color: #fff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                }
            }
        }

        &_item:hover {
            cursor: pointer;
            background-image: linear-gradient(to right, #168cdb, transparent);
        }
    }
}
</style>