<template>
    <div class="chart-container" ref="chartRef" style="width: 450px; height: 400px;"></div>
  </template>

  <script>
  import * as echarts from 'echarts';

  export default {
    props: {
      // 合并后的数据结构
      chartData: {
        type: Object,
        required: true,
        default: () => ({
          level1: [],
          level2: [],
          level3: []
        })
      }
    },
    data() {
      return {
        chart: null
      }
    },
    methods: {
      // 生成唯一的颜色
      generateUniqueColors(count) {
        const baseColors = [
            { start: '#319ae2', end: '#4F7CAC' }, // 深蓝 → 浅蓝
            { start: '#f57e4f', end: '#ebcc88' }, // 鲜黄橙 → 浅黄橙
            { start: '#705fbc', end: '#8d8cd6' }, // 深紫色 → 浅紫色
            { start: '#90f9bf', end: '#88ba91' }  // 深青蓝 → 浅青蓝
          ];
          const colors = [];
          for (let i = 0; i < count; i++) {
            colors.push(baseColors[i % baseColors.length]);
          }
          return colors;
        // const colors = [];
        // const baseColors = [
        //   '#003366', // 深蓝
        //     '#005577', // 深青蓝
        //     '#007799', // 深湖蓝
        //     '#8800cc', // 深紫
        //     '#cc0066', // 深玫红
        //     '#ff3366', // 鲜艳玫红
        //     '#ff6600', // 鲜橙
        //     '#ff9900', // 鲜黄橙
        //     '#009966', // 深绿
        //     '#006666', // 深青
        //     '#003399', // 深靛蓝
        //     '#660099', // 深紫罗兰
        //     '#990033', // 深酒红
        //     '#0066cc', // 深天蓝
        //     '#0099cc', // 鲜艳蓝绿
        //     '#333399'  // 深蓝紫
        // ];

        // for (let i = 0; i < count; i++) {
        //   const startColor = baseColors[i % baseColors.length];
        //   const endColor = baseColors[(i + 4) % baseColors.length];
        //   colors.push({
        //     start: startColor,
        //     end: endColor
        //   });
        // }
        // return colors;
      },

      initChart() {
        const chartDom = this.$refs.chartRef;
        this.chart = echarts.init(chartDom);

        // 核心配置：统一各层的起始角度、排列方向
        const commonPieConfig = {
          clockwise: false,
          startAngle: 90,
          avoidLabelOverlap: true
        };

        // 为第二层生成颜色
        const level2Colors = {};
        const colors = this.generateUniqueColors(this.chartData.level2.length);
        this.chartData.level2.forEach((item, index) => {
          level2Colors[item.name] = colors[index];
        });

        // 计算每个父级分类下的子项数量
        const parentItemCounts = {};
        this.chartData.level3.forEach(item => {
          parentItemCounts[item.parent] = (parentItemCounts[item.parent] || 0) + 1;
        });

        // 为第三层数据分配颜色和角度
        const level3DataWithColor = this.chartData.level3.map((item, index) => {
          const colorConfig = level2Colors[item.parent] || { start: '#2bb8fc', end: '#93cbfd' };
          const parentCount = parentItemCounts[item.parent];
          const parentIndex = this.chartData.level2.findIndex(d => d.name === item.parent);
          const parentAngle = 360 / this.chartData.level2.length;
          const childAngle = parentAngle / parentCount;
          const startAngle = 90 + (parentIndex * parentAngle);
          const itemIndex = this.chartData.level3.filter(d => d.parent === item.parent).indexOf(item);
          const itemStartAngle = startAngle + (itemIndex * childAngle);

          return {
            ...item,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: colorConfig.start
                }, {
                  offset: 1,
                  color: colorConfig.end
                }]
              }
            },
            startAngle: itemStartAngle,
            endAngle: itemStartAngle + childAngle
          };
        });

        // 为第二层数据添加渐变效果
        const level2DataWithGradient = this.chartData.level2.map((item) => {
          const colorConfig = level2Colors[item.name];
          return {
            ...item,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: colorConfig.start
                }, {
                  offset: 1,
                  color: colorConfig.end
                }]
              }
            }
          };
        });

        // 为第一层数据添加渐变效果
        const level1DataWithGradient = this.chartData.level1.map(item => ({
          ...item,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: '#2bb8fc',
              }, {
                offset: 1,
                color: '#93cbfd'
              }]
            }
          }
        }));

        const option = {
          // title: {
          //   text: '防御材料多层环形分布',
          //   left: 'center',
          //   textStyle: { color: '#fff', fontSize: 16 }
          // },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          series: [
            // 第三层（最底层）
            {
              ...commonPieConfig,
              type: 'pie',
              z: 1,
              radius: ['45%', '65%'],
              label: {
                show: true,
                position: 'outside',
                color: '#fff',
                formatter: '{b}\n{d}%',
                fontSize: 12
              },
              label: {
                rotate: 30, // 旋转角度
                fontSize: 12 ,// 缩小字号
                color: '#fff',
                show: false
                // lineStyle: {  }
              },
              labelLine: {
                show: false
              },
              emphasis: {
                label: {
                  show: true
                },
                labelLine: {
                  show: true,
                  length: 20,
                  length2: 30,
                  lineStyle: {
                    color: '#fff'
                  }
                }
              },
              // labelLine: {
              //   show: true,         // 显示引导线
              //   length: 10,         // 第一段线的长度（从饼图边缘到折点）
              //   length2: 30,        // 第二段线的长度（从折点到文字）
              //   lineStyle: {
              //     color: '#fff',    // 线条颜色
              //     width: 1,         // 线条宽度
              //     type: 'solid'     // 线条类型
              //   }
              // },
              // labelLine: {
              //   show: true,
              //   length: 10,
              //   length2: 15,
              //   lineStyle: { color: '#fff' }
              // },

              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              data: level3DataWithColor
            },
            // 第二层（中间层）
            {
              ...commonPieConfig,
              type: 'pie',
              z: 2,
              radius: ['25%', '45%'],
              label: {
                show: true,
                position: 'inside',
                color: '#fff',
                formatter: '{b}\n{c}',
                fontSize: 13
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              data: level2DataWithGradient
            },
            // 第一层（最上层）
            {
              ...commonPieConfig,
              type: 'pie',
              z: 3,
              radius: ['0%', '25%'],
              label: {
                show: true,
                position: 'inside',
                color: '#fff',
                formatter: '{b}\n{c}',
                fontSize: 14,
                position: 'center',
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              data: level1DataWithGradient
            }
          ]
        };

        this.chart.setOption(option);
      }
    },
    mounted() {
      this.initChart();

      // 响应式：窗口变化时重绘
      window.addEventListener('resize', () => {
        this.chart && this.chart.resize();
      });
    },
    watch: {
      chartData: {
        handler() {
          this.initChart();
        },
        deep: true
      }
    },
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      window.removeEventListener('resize', this.chart.resize);
    }
  }
  </script>

  <style scoped>
  .chart-container {
    background: transparent; /* 深色背景匹配设计图 */
    padding: 20px;
  }
  </style>
