<template>
  <el-tree-select v-model="value" v-bind="config" @change="(val) => changeValue(val)" />
</template>

<script setup lang="ts">
  import { SearchFormItem } from '@/types'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()

  // 定义组件值类型
  export type ValueVO = unknown

  // 定义组件props
  const prop = defineProps<{
    value: ValueVO // 树形选择框的值
    item: SearchFormItem // 表单项配置
  }>()

  // 定义emit事件
  const emit = defineEmits<{
    (e: 'update:value', value: ValueVO): void // 更新树形选择框值的事件
  }>()

  // 计算属性:处理v-model双向绑定
  const value = computed({
    get: () => prop.value,
    set: (value: ValueVO) => emit('update:value', value)
  })

  // 合并默认配置和自定义配置
  const config = reactive({
    placeholder: `${t('table.searchBar.searchSelectPlaceholder')}${prop.item.label}`,
    ...(prop.item.config || {})
  })

  // 树形选择框值变化处理函数
  const changeValue = (val: unknown): void => {
    if (prop.item.onChange) {
      prop.item.onChange({
        prop: prop.item.prop,
        val
      })
    }
  }
</script>
