import { defineComponent, computed, ref } from 'vue'
import TreeNode from './treeNode.tsx'
import Tree from './tree.tsx'

const treeContent = defineComponent({
  name: 'treeContent',
  props: {
    data: { type: Object },
    checkable: { type: Boolean },
  },
  emits: ['change'],
  setup(props) {
    //箭头向右则隐藏子节点
    const arrowState = ref(false)
    const isTreeHidden = computed(() => {
      return arrowState.value ? 'u-tree-hidden' : ''
    })

    //箭头通过父接节点将状态发送到兄弟节点
    const onArrowChange = () => {
      arrowState.value = !arrowState.value
    }
    //选中多选当前框，所有父和子节点全部要选中
    const onCheckedChange = (value) => {
      console.log(value)
    }
    return () => (
      <>
        <TreeNode
          label={props.data.title}
          value={props.data.key}
          showArrow={props.data.children && props.data.children.length != 0}
          checkable={props.checkable}
          onArrowChange={onArrowChange}
          onCheckedChange={onCheckedChange}
        />
        {/* 没有孩子则不渲染 */}
        {props.data.children && (
          <Tree
            checkable={props.checkable}
            data={props.data.children}
            class={[isTreeHidden.value]}
          />
        )}
      </>
    )
  },
})

export default treeContent

/*
 * Because of the particularity of component recursion
 * We must pull of the sibling node TreeContent
 * to manage the state of them
 */