<template>
  <p-modal
    :enlargeable="true"
    :title="title"
    :visible="visible"
    width="70%"
    @cancel="handleCancel"
    destroyOnClose
    :footer="footer"
    :maskClosable="true"
  >
    <a-transfer
      v-if="visible"
      showSearch
      :dataSource="transferData"
      :targetKeys="targetKeys"
      :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
      :titles="talbeTitle"
      @change="handleDataAutoChange"
      @search="searchHandle"
    >
      <template
        slot="children"
        rowKey="id"
        slot-scope="{ props: { filteredItems, selectedKeys }, on: { itemSelectAll, itemSelect } }"
      >
        <p-table
          :class="filteredItems && filteredItems.length > 0 && 'table-body-height'"
          ref="table"
          :loading="loading"
          rowKey="id"
          :pagination="pagination"
          dragle
          :columns="columns"
          @clickRow="(event, activeID, rowRecord) => clickRow(activeID, selectedKeys)"
          :row-selection="getRowSelection({ selectedKeys, itemSelectAll, itemSelect })"
          :dataSource="filteredItems"
          @refresh="refresh"
        />
      </template>
    </a-transfer>
  </p-modal>
</template>
<script>
import { Transfer } from 'ant-design-vue'

export default {
  props: {
    talbeTitle: {
      type: Array,
      default() {
        return ['未分配数据权限', '已分配数据权限']
      }
    },
    footer: {
      default: null
    },
    title: '',
    visible: false,
    loading: false,
    columns: [],
    targetKeys: [],
    remoteUrl: '',

    remoteData: {},
    transferData: []
  },
  components: {
    [Transfer.name]: Transfer
  },
  data() {
    return {
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50', '100']
      }
    }
  },
  mounted() {},
  watch: {},
  methods: {
    handleCancel(...args) {
      this.$emit('cancel', args)
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows.filter(item => !item.disabled).map(({ key }) => key)
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys)
          itemSelectAll(diffKeys, selected)
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected)
        },

        selectedRowKeys: selectedKeys
      }
    },
    handleDataAutoChange(targetKeys, direction, moveKeys) {
      this.$emit('change', targetKeys, direction, moveKeys)
    },
    searchHandle(direction, value) {
      console.log(direction, value)
    },
    clickRow(keys, selectedKeys) {
      selectedKeys.push(keys)
      selectedKeys = Array.from(new Set(selectedKeys))
    },
    refresh(...args) {
      this.$emit('refresh', args)
    }
  }
}
</script>
<style lang="less" scoped>
.table-body-height {
  /deep/ .ant-table-body {
    max-height: 430px;
    min-height: 430px;
    overflow-y: auto;
  }
  /deep/ .ant-pagination.ant-table-pagination li {
    &:last-child {
      display: none;
    }
  }
}
</style>
