<template>
  <sd-draggable :value="targetKeys" tag="ul" class="ant-transfer-list-content" @update="onSort">
    <li
      v-for="item in dataSource"
      :key="item[optionValue]"
      :class="{
        'ant-transfer-list-content-item': true,
        'sd-checked': !!selectedKeys.find((key) => item[optionValue] === key),
      }"
      @dblclick="(evt) => itemDblClick(evt, item[optionValue], 'right')"
      @click="(e) => onCheckboxClick(item[optionValue])"
    >
      <a-checkbox :checked="!!selectedKeys.find((key) => item[optionValue] === key)" />
      <span :class="['ant-transfer-list-content-item-text', $style.text]">
        <sd-picker-label :vnodes="render(item, 'right')" />
      </span>
    </li>
  </sd-draggable>
</template>

<script>
import pickerSourceMixin from './picker-source-mixin'
import components from './_import-components/sd-picker-list-right-import'

function moveItem(data, from, to) {
  var f = data.splice(from, 1)[0]
  data.splice(to, 0, f)
}
// value-picker右边的列表
export default {
  name: 'SdPickerListRight',
  components,
  mixins: [pickerSourceMixin],
  data() {
    return {
      isDragging: false,
    }
  },
  methods: {
    onSort(evt) {
      // 拖拽结束后，更新排序后的targetKeys
      const sortedKeys = [...this.targetKeys]
      moveItem(sortedKeys, evt.oldIndex, evt.newIndex)
      this.$emit('updateTargetKeys', sortedKeys)
    },
    onCheckboxClick(keyClick) {
      const checked = !this.selectedKeys.find((key) => keyClick === key)
      this.itemSelect(keyClick, checked)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.text:global(.ant-transfer-list-content-item-text) {
  cursor: pointer;
}
</style>
