<template>
  <div>
    <n-tree
      ref="nTreeRef"
      :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"
      @update:checked-keys="onClick"
      :checked-keys="checkedKeys"
    />
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, ref } 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'
import { NTree } from 'naive-ui'

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

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

const nTreeRef = ref<null | InstanceType<typeof NTree>>(null)

const checkedKeys = ref([])

const onClick = (v: string[]) => {
  // nTreeRef.value?.selectedKeys(v)
  // nTreeRef.value?.onUpdateCheckedKeys(v)
  if (Array.isArray(v) && v.length == 0) return
  useChartInteract(
    props.chartConfig,
    useChartEditStore,
    { [ComponentInteractParamsEnum.DATA]: v[0] },
    InteractEventOn.CHANGE,
    []
  )
}
</script>

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