<template>
  <div ref="chartContainer" style="width: 800px; height: 550px;"></div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, onMounted } from "vue";
import * as echarts from "echarts";
import { getSonId, getDayId } from '@/api/Invite';
import { reactive } from "vue";
    const chartContainer = ref(null);
    const props = defineProps({
        id: Number,
    });
    const data = reactive( {
        name: '',
        symbolSize:40,
        children: []
    });
    // 树形数据
    const chartOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      series: [
        {
          type: 'tree',  // 使用树形图
          layout: 'tree',  // 布局类型：'radial' 或 'tree'
          roam: true,  // 启用拖动功能,
          orient: 'vertical',// 方向改为自上而下
          initialTreeDepth: -1, // 可以让所有节点都展开
          data: [
          data
          ],
          itemStyle: {
            color: '#63b1f2',  // 节点颜色
          },
          label: {
            position: 'top',
            verticalAlign: 'middle',
            align: 'center',
            fontSize: 12,
          },
          lineStyle: {
            color: '#aaa',
            width: 2,
            curveness: 0.3,
          }
        }
      ]
    };

    // 在组件挂载后初始化图表
    onMounted(() => {
        getSonId(props.id).then(res => {
            data.name = props.id || '';
            
            if(res.data!=null){
                res.data.forEach((element: any) => {
                    let item = {
                        name:element.invitename,
                        symbolSize:20,
                        children: []
                    }
                        getSonId(element.invitename).then(res1 => {
                            if(res1.data!=null){
                                res1.data.forEach((element1: any) => {
                                    let item1 = {
                                        name: element1.invitename,
                                        symbolSize:20,
                                        children: []
                                    };
                                    item.children.push(item1);
                                })
                                data.children.push(item); 
                                const myChart = echarts.init(chartContainer.value);
                                myChart.setOption(chartOption); 
                            }
                        })
                    
                        
                });
            }

        })
   
    });

</script>

<style scoped>
/* 样式可根据需要自定义 */
</style>
