<template>
     <div class="groupPanel-component">
        <img :src="title" alt="" class="title" />
        <div class="groupPanel-list">
            <div class="group-item" v-for="group in groupList" :key="group.id">
              <div class="group-item-title">
                <img
                  class="group-item-title-icon"
                  src="@/assets/images/linkPrediction/title/group-item-title.png"
                  alt=""
                />
               <div class="group-item-title-type">{{ group.type }}</div>
              </div>
              <div class="group-item-statistics">
                <div class="statistics-title">关注话题：{{ group.focusedTopic }}</div>
                <div class="container" :id="`group-chart-${group.id}`"></div>
              </div>
            </div>
        </div>
     </div>
</template>

<script setup>
import { defineProps, ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  groupList: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ""
  }
});

// 存储图表实例，用于销毁
const chartInstances = new Map();
const indicator = [
    { name: '成长期', max: 30 },
    { name: '收缩期', max: 30 },
    { name: '合并期', max: 30 },
    { name: '分裂期', max: 30 },
]
// 初始化图表的外部函数
const initChart = (groupList) => {
  groupList.forEach(group => {
    const chartDom = document.getElementById(`group-chart-${group.id}`);
    if (chartDom && group.series) {
      const myChart = echarts.init(chartDom);
      chartInstances.set(group.id, myChart);
      const option = {
        tooltip: {},
        // 雷达图配置
        radar: {
          startAngle: 135, // 原点从 -45° 开始
          indicator: indicator, // 雷达图坐标轴
          shape: 'circle', // 圆形分层
          splitNumber: 5, // 分层的数量
          //   坐标字体
          axisName: {
            color: '#94C1EC',
            fontSize: 14,
          },
          // 圆心到坐标的线
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(35, 60, 92, 0.75)'
            }
          },
          //   每个圆的线  
          splitLine: {
            lineStyle: {
              color: 'rgba(37, 50, 67, 1)'
            }
          },
          // 每个圆之间的填充
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(10, 26, 47, 0.3)', 'rgba(10, 26, 47, 0.5)']
            }
          },
        },
        series: group.series
      };

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

onMounted(() => {
  // 调用初始化图表函数
  initChart(props.groupList);

  // 响应窗口大小变化
  window.addEventListener('resize', handleResize);
});

// 处理窗口大小变化
const handleResize = () => {
  chartInstances.forEach(chart => {
    chart.resize();
  });
};

// 组件卸载时销毁图表
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  chartInstances.forEach(chart => {
    chart.dispose();
  });
  chartInstances.clear();
});

</script>

<style lang="less">
.groupPanel-component {
  width: 100%;
  height: 100%;
  .title {
    margin-top: -7px;
    margin-left: -2px;
  }
  .groupPanel-list {
    width: 100%;
    height: 470px;
    padding: 0 20px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 3px; /* 垂直滚动条宽度 */
      height: 5px; /* 水平滚动条高度 */
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
    }
    .group-item {
      width: 100%;
      height: 260px;
      padding-top: 16px;
      padding-bottom: 20px;
      border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
      .group-item-title {
        position: relative;
        .group-item-title-type {
          position: absolute;
          top: 0;
          color: #8efbff;
          left: 17px;
          font-size: 14px;
        }
      }
      .group-item-statistics {
        width: 100%;
        height: 40px;
        margin-top: 20px;
        color: #fff;
        font-family: PingFang SC;
        font-weight: 400;
        font-style: Medium;
        font-size: 14px;
        .container {
          left: 40px;
          width: 218px;
          height: 170px;
        }
      }
    }
  }
}
</style>
