<template>
    <!--热力图-->
    <div style="height: 100%; background-color: #000;">
        <div style="width: 100%; height: 100%;">
            <div :id="chartId" class="main"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "hotMap_chart"
}
</script>

<script setup>
import * as echarts from 'echarts';
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { getGridInfoList } from '@/api/Zodiac';
import { cs } from 'element-plus/es/locales.mjs';

// 生成唯一的图表ID
const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
let myChart = null;

// 生成六边形热力图数据
function generateHexagonData() {
    // 模拟巴西地图形状的六边形网格数据
    const data = [];
    const centerX = 0;
    const centerY = 0;

    // 六边形排列参数
    const radius = 15;
    const startRadius = 10;
    const endRadius = 40;
    const angleStep = Math.PI / 3; // 60度

    // 生成类似巴西地图轮廓的六边形点
    for (let r = startRadius; r < endRadius; r += radius * 0.85) {
        // 根据半径调整角度数量，形成不规则形状
        const angleCount = Math.round(8 - r / 10) + Math.floor(Math.random() * 2);

        for (let i = 0; i < angleCount; i++) {
            // 基础角度，添加偏移使形状更接近巴西地图
            const baseAngle = angleStep * i;
            let angleOffset = 0;

            // 根据位置添加偏移，形成不规则形状
            if (r < startRadius + 15) angleOffset = 0.3;
            else if (r > endRadius - 15) angleOffset = -0.2;
            else if (i > angleCount / 2) angleOffset = 0.1;

            const angle = baseAngle + angleOffset;

            // 计算坐标
            const x = centerX + r * Math.cos(angle);
            const y = centerY + r * Math.sin(angle);

            // 根据位置生成不同的值（模拟容量）
            let value;
            // 左侧区域值较低（蓝色）
            if (x < -10) {
                value = Math.random() * 30;
            }
            // 右侧区域值较高（红色）
            else if (x > 20) {
                value = 70 + Math.random() * 30;
            }
            // 中间区域值中等（黄、绿）
            else {
                value = 30 + Math.random() * 40;
            }

            data.push({
                value: [x, y, value],
                itemStyle: {
                    opacity: 0.9
                }
            });
        }
    }

    // 添加东南部突出部分（类似巴西东南角）
    for (let i = 0; i < 5; i++) {
        const angle = -Math.PI / 4 + i * angleStep / 2;
        const r = endRadius - 5 + i * 3;
        const x = centerX + r * Math.cos(angle);
        const y = centerY + r * Math.sin(angle);

        data.push({
            value: [x, y, 80 + Math.random() * 20],
            itemStyle: {
                opacity: 0.9
            }
        });
    }

    return data;
}

// 初始化图表
function initChart() {
    const chartDom = document.getElementById(chartId.value);
    chartDom.style.width = '100%';
    chartDom.style.height = '150px';


    if (!chartDom) return;

    myChart = echarts.init(chartDom);

    // 生成热力图数据
    const data = generateHexagonData();

    const option = {
        backgroundColor: '#000',
        title: {
            text: '链路层容量',
            left: 'center',
            // top: 10,
            left: 10,
            textStyle: {
                color: '#fff',
                fontSize: 10,
                fontWeight: 'normal'
            }
        },
        tooltip: {
            // formatter: function(params) {
            //     return `容量: ${params.data[2].toFixed(1)}`;
            // },
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            borderColor: '#444',
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            min: 0,
            max: 100,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            // bottom: 30,
            inRange: {
                color: ['#0050b3', '#1890ff', '#7cb305', '#ffd500', '#ff4d4f']
            },
            textStyle: {
                color: '#fff'
            },
            // itemWidth: 40,
            // itemHeight: 10,
            borderWidth: 0
        },
        xAxis: {
            type: 'value',
            show: false,
            min: -50,
            max: 50
        },
        yAxis: {
            type: 'value',
            show: false,
            min: -50,
            max: 50
        },
        series: [{
            name: '链路容量',
            type: 'scatter',
            coordinateSystem: 'cartesian2d',
            symbol: 'path://M0,-10 L10,5 L10,15 L0,20 L-10,15 L-10,5 Z', // 六边形路径
            symbolSize: [15, 15], // 六边形大小
            data: data,
            label: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },

        ],
        tooltip: {
            trigger: 'axis',
            // 确保tooltip显示在最上层
            extraCssText: 'z-index: 999999 !important;',
            backgroundColor: 'rgba(50,50,50,0.8)',
            borderColor: '#333',
            borderWidth: 1,
            padding: 10,
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
            // 固定tooltip位置在顶部
            position: function (pos, params, dom, rect, size) {
                return ['5%', pos[1]];
            }
        }
    };


    

    myChart.setOption(option);
    resizeChart();
}

// 响应式调整图表大小
function resizeChart() {
    if (myChart) {
        myChart.resize();
    }
}

onMounted(async () => {

    const ret = await getGridInfoList()
    console.log('rethotMAP', ret)
    // 确保DOM渲染完成后初始化图表
    nextTick(() => {
        initChart();
        window.addEventListener('resize', resizeChart);
    });
    // setTimeout(() => {
    //     initChart();
    //     window.addEventListener('resize', resizeChart);
    // }, 0);
});

onUnmounted(() => {
    if (myChart) {
        window.removeEventListener('resize', resizeChart);
        myChart.dispose();
        myChart = null;
    }
});
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
    /* min-height: 400px; */
    /* overflow: hidden; */
}
</style>