<template>
  <sd-value-picker ref="picker" v-bind="$props" v-on="$listeners">
    <template v-if="$scopedSlots.suffixIcon" v-slot:suffixIcon>
      <!-- @slot input框最后的图标 -->
      <slot name="suffixIcon" />
    </template>
    <template v-slot:targetListHeader="scope">
      <!--
    @slot 右侧列表顶部<p>8.0.7 新增</p>
    @binding targetKeys {array} 右侧列表所有项目的 key 值
    @binding targetValues {array} 右侧列表所有项目的完整 Object 值
       -->
      <slot
        :targetKeys="scope.targetKeys"
        :targetValues="scope.targetValues"
        name="targetListHeader"
      />
    </template>
    <template v-slot="scope">
      <sd-picker-source-tree ref="tree" v-bind="{ ...$props, ...scope }" />
    </template>
  </sd-value-picker>
</template>

<script>
import pickerMixinInternal from './sd-picker/picker-mixin-internal'
import components from './_import-components/sd-tree-picker-import'

/**
 * input框，通过弹出对话框，从树形结构中选择数据
 * @displayName SdTreePicker 树选择器
 */
export default {
  name: 'SdTreePicker',
  components,
  mixins: [pickerMixinInternal],
  props: {
    /**
     * <p>获取数据的回调，获取根节点时，parentId为undefined</p>
     * <pre>(parentId,parent) => childrenItems</pre>
     */
    loadTreeData: {
      type: Function,
      required: true,
    },
    /**
     * <p>搜索数据的回调</p>
     * <pre>(searchText) => items</pre>
     * @since 8.0.2
     */
    searchTreeData: {
      type: Function,
      default: undefined,
    },
    /**
     * 默认展开指定的树节点
     * @since 8.0.7
     */
    defaultExpandedKeys: {
      type: Array,
      default: undefined,
    },
    /**
     * 即使节点不可选择，也显示单选、复选框（为了对齐）
     * @since 8.1.0.25
     */
    forceShowItemChecker: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
