<script lang="ts" setup name="TreeV2">
import { ref } from 'vue'
import { ElTreeV2 } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import type { TreeNodeData, TreeNode } from 'element-plus/es/components/tree-v2/src/types'

const props = defineProps({
  treeInfo: {
    type: Object,
    default: {}
  },
})

const emits = defineEmits(['checkChange']);

const query = ref('')
const treeRef = ref<InstanceType<typeof ElTreeV2>>()
const treeHeight = ref(200)
const treeProps = computed(() => {
  return props.treeInfo.props ?? {}
})
const treeData = computed(() => {
  return props.treeInfo.data ?? []
})
const defaultCheckedKeys = computed(() => {
  return props.treeInfo.checkedKey
})
const defaultExpandedKeys = computed(() => {
  return props.treeInfo.expandedKey
})

defineExpose({
  treeRef,
})

const onQueryChanged = (query: string) => {
  treeRef.value!.filter(query)
}
const filterMethod = (query: string, node: TreeNode) => {
  return node[treeProps.value.label]!.includes(query)
}

const checkChange = (data: TreeNodeData, checked: boolean) => {
  emits('checkChange', data, checked)
}

onMounted(() => {
  setTimeout(() => {
    const panel = document.querySelector('.tree_panel')
    treeHeight.value = panel.offsetHeight - 40
  }, 200)
})
</script>

<template>
  <div class="tree_panel">
    <el-input v-model.trim="query" placeholder="请输入关键字" :prefix-icon="Search" clearable @input="onQueryChanged" />
    <el-tree-v2 ref="treeRef" show-checkbox :data="treeData" :props="treeProps" :height="treeHeight" :item-size="32"
      :filter-method="filterMethod" :expand-on-click-node="false" :default-checked-keys="defaultCheckedKeys"
      :default-expanded-keys="defaultExpandedKeys" @check-change="checkChange" />
  </div>
</template>
<style lang="scss" scoped>
.tree_panel {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 8px 0;
  overflow: hidden;

  .el-input {
    margin: 0 8px 8px;
    width: calc(100% - 16px);
  }
}
</style>