<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-list v-bind="{ ...$props, ...scope }" />
    </template>
  </sd-value-picker>
</template>

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

/**
 * input框，通过弹出对话框，从列表中选择数据
 * @displayName SdListPicker 值选择器
 */
export default {
  name: 'SdListPicker',
  components,
  mixins: [pickerMixinInternal],
  props: {
    /**
     * 获取列表数据的回调
     */
    loadListData: {
      type: Function,
      required: true,
    },
  },
}
</script>

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