<template>
  <div>
    <n-tree
      :accordion="treeConfig.accordion"
      :checkable="treeConfig.checkable"
      :default-expand-all="treeConfig.defaultExpandAll"
      block-line
      block-node
      :data="dataset"
      key-field="id"
      label-field="name"
      children-field="children"
      @update:selected-keys="onClick"
    />
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { dataset, treeConfig } = toRefs(props.chartConfig.option)

const onClick = (v: string[]) => {
  useChartInteract(
    props.chartConfig,
    useChartEditStore,
    { [ComponentInteractParamsEnum.DATA]: v[0] },
    InteractEventOn.CHANGE
  )
}
</script>

<style lang="scss" scoped></style>