<template>
  <div :class="$style.wrapper">
    <a-spin :spinning="!dataLoaded" :class="$style.spin">
      <ul class="ant-transfer-list-content">
        <li
          v-for="item in dataSourceComputed"
          :key="item[optionValue]"
          :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>
        </li>
      </ul>
    </a-spin>
    <a-empty v-if="dataLoaded && dataSourceComputed.length === 0" :image="simpleImage" />
  </div>
</template>

<script>
import { Radio, Checkbox } from 'ant-design-vue'
import SdPickerLabel from './sd-picker/sd-picker-label'
import components from './_import-components/sd-picker-source-list-import'
import pickerSourceMixin from './sd-picker/picker-source-mixin'

/**
 * SdValuePicker的数据源：列表
 * @displayName SdPickerSourceList 数据源-列表
 */
export default {
  name: 'SdPickerSourceList',
  components: {
    ...components,
    SdPickerLabel,
  },
  mixins: [pickerSourceMixin],
  props: {
    /**
     * 获取列表数据的回调
     */
    loadListData: {
      type: Function,
      required: true,
    },
    /**
     * 显示搜索框
     * @since 8.0.8
     */
    showSearch: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  computed: {
    dataSourceComputed() {
      if (!this.dataLoaded) return []
      // 把已选中的排除掉
      return this.dataSource.filter((data) => {
        return !this.targetKeys.find((key) => key === data[this.optionValue])
      })
    },
  },
  watch: {
    searchValue(text) {
      if (text) {
        const searchedList = this.listData.filter((data) => {
          // 处理过滤条件
          return data[this.optionLabel].toLowerCase().indexOf(text.toLowerCase()) !== -1
        })
        this.updateDataSource(searchedList)
      } else {
        this.updateDataSource(this.listData)
      }
    },
  },
  beforeCreate() {
    this.aRadio = Radio
    this.aCheckbox = Checkbox
  },
  created() {
    this.listData = []
    this.updateShowSearch(this.showSearch)
    Promise.resolve(this.loadListData())
      .then((data) => {
        this.listData = data
        this.updateDataSource(data)
      })
      .finally(() => (this.dataLoaded = true))
  },
  methods: {
    onCheckboxClick(keyClick) {
      const checked = !this.selectedKeys.find((key) => keyClick === key)
      this.itemSelect(keyClick, checked)
    },
  },
}
</script>

<style module lang="scss">
@import './sd-picker/source.scss';
</style>

<docs>
需要作为 [SdValuePicker](#sdvaluepicker) 的子节点使用，样例请参考 [SdValuePicker](#sdvaluepicker)
</docs>
