<template>
    <div class="_consume">
        <HeadlineTag type="right" 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 props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})

const chartRef = ref(null);
let chart = null;
// 模拟不同年龄段的阅读量数据
const ageGroupReadData = [30, 50, 70, 40, 20];
const ageGroups = ['30岁以下', '30 - 40岁', '40 - 50岁', '50 - 60岁', '60岁以上'];
const handleResize = () => {
    if (chart) {
        chart.resize();
    }
};
onMounted(() => {
    if (chartRef.value) {
        chart = echarts.init(chartRef.value);
        const option = {
            xAxis: {
                type: 'category',
                data: ageGroups,
                axisLabel: {
                    color: '#fff'
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                textStyle: {
                    color: '#fafafa',
                },
                borderColor: 'transparent',
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                extraCssText: 'backdrop-filter: blur(6px);',
            },
            grid: {
                top: '10%',
                bottom: '10%',
                right: '0%',
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    color: '#fff'
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#44585e'
                    }
                },
                axisTick: {
                    show: false
                },
            },
            series: [
                {
                    name: '阅读量',
                    type: 'bar',
                    // data: ageGroupReadData,
                    data: [],
                    // 设置柱子宽度
                    barWidth: '40%',
                    itemStyle: {
                        // 设置柱子圆角，仅上下圆角
                        borderRadius: [10, 10, 10, 10],
                        // 设置渐变颜色
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#446bf5' // 渐变起始颜色
                                },
                                {
                                    offset: 1,
                                    color: '#2ca3e2' // 渐变结束颜色
                                }
                            ],
                            global: false
                        }
                    },
                    // 添加柱状图背景样式
                    barBackgroundStyle: {
                        color: 'rgba(255, 255, 255, 0.1)', // 背景颜色，这里设置为半透明白色
                        borderRadius: [10, 10, 0, 0] // 背景圆角和柱子保持一致
                    }
                }
            ]
        };

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

watch(() => props.resultData, (newVal) => {
    if (chart) {
        let dataArr = []
        let arr = Object.entries(newVal)
        arr.forEach(item=>{
            dataArr.push(item[1])
        })
        chart.setOption({
            series: [{
                name: '阅读量',
                data: dataArr,
            }],
        })
    }
}, { deep: true, immediate: true } // 开启深度监听
)
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>