<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('ret', 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>