import { defineComponent, computed, ref, inject } from 'vue'
import Arrow from './util/arrow.vue'
import { UCheckbox } from '../checkbox/index'

const treeNode = defineComponent({
  name: 'treeNode',
  props: {
    label: { type: String },
    value: {},
    showArrow: { type: Boolean },
    checkable: { type: Boolean, default: false },
    onArrowChange: { type: Function },
    onCheckedChange: { type: Function },
  },
  setup(props) {
    // 箭头向下（false）/向右（true）的状态
    const arrowState = ref(false)
    const isArrowClose = computed(() => {
      return arrowState.value ? 'u-tree-node-switcher-close' : ''
    })
    const switcherStateChange = () => {
      props.onArrowChange(arrowState.value)
      arrowState.value = !arrowState.value
    }
    //如果没有孩子，应该隐藏箭头
    const isArrowHidden = computed(() => {
      return props.showArrow ? '' : 'u-tree-node-switcher-hidden'
    })

    const rootData = inject('rootData', null)
    //多选框选中/非选中的状态
    const checkValue = ref(false)
    const onUpdateChecked = (value) => {
      checkValue.value = value
      rootData.onCheckedChange(props.value)
    }
    return () => (
      <li class="u-tree-node">
        <Arrow
          class={[
            'u-tree-node-switcher',
            isArrowClose.value,
            isArrowHidden.value,
          ]}
          onClick={switcherStateChange}
        />
        {props.checkable && (
          <UCheckbox
            checked={checkValue.value}
            onUpdate:checked={onUpdateChecked}
          />
        )}
        <span class="u-tree-node-text">{props.label}</span>
      </li>
    )
  },
})

export default treeNode

/*
 * 点击某个节点，其以下节点会全部选中，以上节点会全部选中
 */