<template>
  <div class="tree-chart-wrapper" id="tree-chart">

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import setChart from '@/utils/setChart';
import getTreeChart from './treeChart';
import CompanyImg from "@/assets/icons/symbol.png";

const props = defineProps({
  treeData: {
    type: Array,
    default: [
      {
        id: 1,
        name: 'a1',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
        children: [
          {
            id: 11,
            name: 'b1',
            symbolSize: 30,
            value: 5,
            symbol: `image://${CompanyImg}`,
          },
          {
            id: 12,
            name: 'b2',
            symbolSize: 30,
            value: 5,
            symbol: `image://${CompanyImg}`,
          },
          {
            id: 13,
            name: 'b3',
            symbolSize: 30,
            value: 5,
            symbol: `image://${CompanyImg}`,
          },
          {
            id: 14,
            name: 'b4',
            symbolSize: 30,
            value: 5,
            symbol: `image://${CompanyImg}`,
          }
        ]
      }
    ]
  }
})

onMounted(() => {
  const treeChart = getTreeChart(props.treeData)
  setChart(treeChart, 'tree-chart')
})

</script>

<style lang="scss" scoped>
.tree-chart-wrapper {
  width: 100%;
  height: 100%;
}
</style>