<template>
  <view class="fg-tree">
    <FgTreeNode
      v-for="node in props.data"
      :key="node.id"
      :node="node"
      :level="0"
      :default-expanded-keys="props.defaultExpandedKeys"
      @node-click="emit('node-click', $event)"
      @node-expand="emit('node-expand', $event)"
      @node-collapse="emit('node-collapse', $event)"
    />
  </view>
</template>

<script setup lang="ts">
// @ts-ignore
import { defineProps, defineEmits } from 'vue'
import FgTreeNode from './fg-tree-node.vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  } as any,
  
  defaultExpandedKeys: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['node-click', 'node-expand', 'node-collapse'])
</script>

<style scoped lang="scss">
// .fg-tree {
//   width: 100%;
//   min-height: 300rpx;
//   background-color: #f9f9f9;
//   border-radius: 8rpx;
//   padding: 20rpx;
//   overflow: auto;
// }
</style>
