<template>
  <div :class="$style.wrapper">
    <a-spin :spinning="!dataLoaded" :class="$style.spin">
      <RecycleScroller
        :items="dataSourceComputed"
        :item-size="itemSize"
        :key-field="optionValue"
        :class="['ant-transfer-list-content']"
      >
        <template v-slot="{ item }">
          <div
            :class="{
              'ant-transfer-list-content-item': true,
              'sd-checked': !!selectedKeys.find((key) => item[optionValue] === key),
            }"
            @dblclick="(evt) => itemDblClick(evt, item[optionValue])"
            @click="(e) => onCheckboxClick(item[optionValue])"
          >
            <component
              :is="single ? aRadio : aCheckbox"
              :checked="!!selectedKeys.find((key) => item[optionValue] === key)"
            >
            </component>
            <span class="ant-transfer-list-content-item-text">
              <SdPickerLabel :vnodes="render(item, 'left')" />
            </span>
          </div>
        </template>
      </RecycleScroller>
    </a-spin>
    <a-empty v-if="dataLoaded && dataSourceComputed.length === 0" :image="simpleImage" />
  </div>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import 'intersection-observer'
import SdPickerLabel from './sd-picker/sd-picker-label'
import components from './_import-components/sd-picker-source-lazy-list-import'
import pickerSourceList from './sd-picker-source-list.vue'

/**
 * SdValuePicker的数据源：懒加载列表
 * @displayName SdPickerSourceLazyList 数据源-懒加载列表
 * @since 8.0.13
 */
export default {
  name: 'SdPickerSourceLazyList',
  components: {
    ...components,
    SdPickerLabel,
    RecycleScroller,
  },
  mixins: [pickerSourceList],
  props: {
    /**
     * 列表项的高度
     */
    itemSize: {
      type: Number,
      default: 36,
    },
  },
}
</script>

<style module lang="scss">
@import './sd-picker/source.scss';
:global(#sd-body) {
  .wrapper {
    :global .ant-spin-container {
      height: 100%;
    }
    :global .ant-transfer-list-content-item {
      white-space: nowrap;
    }
  }
}
</style>

<docs>
与 SdPickerSourceList 用法与效果基本相同，区别是 SdPickerSourceLazyList 只会渲染可见部分的列表内容，所以适合大数据量的场景

缺点是列表项的高度必须相同，可以通过 itemSize 指定

样例请参考 [SdPickerSourceList](#sdpickersourcelist)
</docs>
