<template>
  <a-transfer
    showSearch
    :show-select-all="false"
    :dataSource="transferData||[]"
    :targetKeys="targetKeys"
    :locale="{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入名称' }"
    :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
    :titles="talbeTitle"
    @change="handleDataAutoChange"
    @search="searchHandle"
  >
  <template
      slot="children"
      rowKey="key"
      slot-scope="{ props, on }">
    <t-table
        ref="table"
        autoColWidth
        :id="$route.meta.menuId + '_transfer_' + props.direction"
        :loading="loading"
        rowKey="key"
        :scroll="{ x: true }"
        :vScrollX="{ enabled: false }"
        :vScrollY="{ enabled: true, rows: 8 }"
        :pagination="false"
        dragle
        rowSelectFixed
        :columns="columns"
        :selectedRowKeys="props.selectedKeys"
        @selectAll="
          (selected, selectedRows) => {
            selectAll(selected, selectedRows, props, on);
          }
        "
        @clickRow="(evnet, key, data) => clickRow(evnet, key, data, props, on)"
        @select="(record, checked, getSelectionData, nativeEvent) => select(record, checked, getSelectionData, nativeEvent, props, on)"
        :dataSource="props.filteredItems"
      />
    </template>
  </a-transfer>
</template>
<script>
import difference from 'lodash/difference';

export default {
  name:'transfer-modal',
  props: {
    talbeTitle: {
      type: Array,
      default() {
        return ['待绑司机', '已绑司机'];
      },
    },
    footer: {
      default: null,
    },
    title: '',
    visible: false,
    loading: false,
    columns: [],
    targetKeys: {type:Array},
    remoteUrl: '',
    remoteData: {},
    transferData: [],
  },

  data() {
    return {};
  },
  mounted() {},
  watch: {},
  methods: {
    handleCancel(...args) {
      this.$emit('cancel', args);
    },
    selectAll(selected, selectedRows, { selectedKeys }, on) {
      let treeSelectedKeys = [];
      selectedRows.filter((item) => {
        if (!item.disabled) {
          treeSelectedKeys.push(item.key);
        }
      });
      const diffKeys = selected ? difference(treeSelectedKeys, selectedKeys) : difference(selectedKeys, treeSelectedKeys);

      return on.itemSelectAll(diffKeys, selected);
    },
    clickRow(evnet, key, data, props, { itemSelect }) {
      return itemSelect(key, !props.selectedKeys.includes(key));
    },
    select(record, checked, getSelectionData, nativeEvent, props, { itemSelect }) {

      itemSelect(record.key, checked);
    },
    handleDataAutoChange(targetKeys, direction, moveKeys) {

      this.$emit('change', targetKeys, direction, moveKeys);
    },
    searchHandle(direction, value) {

      console.log(direction, value);
    },

    refresh(...args) {
      this.$emit('refresh', args);
    },
  },
};
</script>
<style lang="less" scoped>
.ant-transfer-customize-list {
  /deep/.ant-transfer-list {
    width: 40%;
  }
}

</style>
