<template>
  <el-tree-select
    :model-value="modelValue"
    :data="data"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :multiple="multiple"
    :check-strictly="checkStrictly"
    :render-after-expand="false"
    :props="treeProps"
    node-key="id"
    @update:model-value="handleChange"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { TreeNode } from '@/types/form'

interface Props {
  modelValue: string | number | Array<string | number> | null
  data: TreeNode[]
  multiple?: boolean
  checkStrictly?: boolean
  placeholder?: string
  disabled?: boolean
  clearable?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: string | number | Array<string | number> | null): void
}

const props = withDefaults(defineProps<Props>(), {
  multiple: false,
  checkStrictly: false,
  placeholder: '请选择',
  clearable: true,
  disabled: false
})

const emit = defineEmits<Emits>()

const treeProps = {
  label: 'label',
  children: 'children',
  disabled: 'disabled'
}

const handleChange = (value: string | number | Array<string | number> | null) => {
  emit('update:modelValue', value)
}
</script>

<style scoped lang="scss">
.el-tree-select {
  width: 100%;
}
</style>
