<!-- 通用表格穿梭框 -->
<!-- EXAMPLE
<TableTransfer
  row-key="code"
  :title="['待选平台', '已选平台']"
  :table-colums="[
    { label: '平台名称', id: 'name' },
    { label: '平台编码', id: 'code' },
    { label: '平台类型', id: 'platformTypeName' }
  ]"
  :data="platformOptions"
  :to-data.sync="platformList"
/>
-->
<template>
  <div>
    <TableTransferBase
      ref="tableTransfer"
      v-model="tableData"
      v-loading="tableLoading"
      :show-query="showDataQuery"
      :show-to-query="showToDataQuery"
      :show-pagination="false"
      :pagination-call-back="paginationCallBack"
      :left-columns="tableColums"
      :title-texts="title"
      :table-row-key="row => row[rowKey]"
      :search-keys="searchKeys"
    >
      <template v-slot:leftCondition="{ scope }">
        <el-form-item label="" class="inline-form-item">
          <el-input v-model="scope.keyword" :placeholder="placeholder" style="width: 100% !important;" clearable />
        </el-form-item>
      </template>
      <template v-slot:rightCondition="{ scope }">
        <el-form-item label="">
          <el-input v-model="scope[searchKeys[0]]" :placeholder="placeholder" @input="searchKeys.map(key => $set(scope, key, $event))" />
        </el-form-item>
      </template>
    </TableTransferBase>
  </div>
</template>

<script>
import TableTransferBase from '../TableTransfers/index.vue'

export default {
  name: 'TableTransfer',
  components: {
    TableTransferBase
  },
  props: {
    companyId: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    toData: {
      type: Array,
      default() {
        return []
      }
    },
    remoteMethods: {
      type: Function,
      default() {
        return async() => {
          return []
        }
      }
    },
    tableColums: {
      type: Array,
      default() {
        return [
          { label: '车场编号', id: 'parkId' },
          { label: '车场名称', id: 'parkName' }
        ]
      }
    },
    title: {
      type: Array,
      default() {
        return ['待选择', '已选择']
      }
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    rowKey: {
      type: String,
      default: 'parkId'
    },
    searchKeys: {
      type: Array,
      default() {
        return ['parkId', 'parkName']
      }
    },
    showDataQuery: {
      type: Boolean,
      default: true
    },
    showToDataQuery: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [ // 已选（右）
      ],
      tableOption: [ // 选项（左）
      ],
      tableLoading: false
    }
  },
  watch: {
    data: {
      handler(val) {
        this.tableOption = val || []
      },
      immediate: true
    },
    toData: {
      handler(val) {
        this.tableData = val || []
      },
      immediate: true
    },
    tableData: {
      handler(val) {
        this.$emit('update:toData', val)
      },
      immediate: true
    }
  },
  methods: {
    paginationCallBack(e) {
      // console.log(e)
      const data = this.tableOption.filter((item, index) => {
        const isMatch = e.keyword === '' || e.keyword == null || this.searchKeys.some(key => item[key].indexOf(e.keyword) !== -1)
        const isSelected = this.tableData.some(data => data[this.rowKey] === item[this.rowKey])

        if (index >= (e.pageIndex - 1) * e.pageSize && index < e.pageIndex * e.pageSize && isMatch && !isSelected) {
          return true
        }
        return false
      })
      return new Promise((resolve, reject) => {
        try {
          resolve({ total: this.tableOption.length, data })
        } catch {
          reject()
        }
      })
    },
    updateRightCondition(scope, val) {
      scope.keyword = val
      scope.name = val
    },
    clearTransfer() {
      this.tableData = []
      this.$refs.tableTransfer.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
