<template>
  <div :class="$style.wrapper">
    <a-spin :spinning="!dataLoaded" :class="$style.spin">
      <a-row :gutter="[16, 8]" class="ant-transfer-list-content iconRow">
        <a-col
          v-for="item in dataSourceComputed"
          :key="item[optionValue]"
          :span="4"
          :class="{
            'ant-transfer-list-content-item': true,
            'sd-checked': !!selectedKeys.find((key) => item[optionValue] === key),
          }"
          @dblclick="(evt) => itemDblClick(evt, item[optionValue])"
        >
          <component
            :is="single ? aRadio : aCheckbox"
            :checked="!!selectedKeys.find((key) => item[optionValue] === key)"
            @change="(e) => onCheckboxChange(e, item[optionValue])"
          >
            <VNodes :vnodes="render(item, 'left')" />
          </component>
        </a-col>
      </a-row>
    </a-spin>
    <a-empty v-if="dataLoaded && dataSourceComputed.length === 0" :image="simpleImage" />
  </div>
</template>

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

/**
 * SdValuePicker的数据源：列表
 * @displayName SdPickerSourceList 数据源-列表
 */
export default {
  name: 'SdPickerSourceIcon',
  components: {
    ...components,
    VNodes: {
      functional: true,
      render: (h, ctx) => {
        return <span>{ctx.props.vnodes}</span>
      },
    },
  },
  mixins: [pickerSourceMixin],
  props: {
    /**
     * 获取列表数据的回调
     */
    loadListData: {
      type: [Array, Function],
      required: true,
    },
    typeKey: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      listData: [],
    }
  },
  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)
      }
    },
    typeKey() {
      this.initData()
    },
  },
  beforeCreate() {
    this.aRadio = Radio
    this.aCheckbox = Checkbox
  },
  created() {
    this.updateShowSearch(true)
    this.initData()
  },
  methods: {
    initData() {
      Promise.resolve(
        Array.isArray(this.loadListData) ? this.loadListData : this.loadListData()
      ).then((data) => {
        this.dataLoaded = true
        this.listData = data
        this.updateDataSource(data)
      })
    },
    onCheckboxChange(e, key) {
      this.itemSelect(key, e.target.checked)
    },
  },
}
</script>

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

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