<template>
  <tiny-transfer
    ref="transferRef"
    v-model="value"
    :render="render"
    :data="data"
    filter-placeholder="请输入城市拼音"
    filterable
    :right-default-checked="['5']"
    :left-default-checked="['1']"
    :props="{ key: 'id', disabled: 'disabled' }"
    :columns="columns"
    :pager-op="pagerOp"
    :show-pager="true"
    :filter-method="filterMethod"
  >
    <template #default="optionData">
      <div>
        <span>{{ optionData.option.key }} - {{ optionData.option.label }}</span>
      </div>
    </template>
  </tiny-transfer>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { Transfer as TinyTransfer, Table } from '@opentiny/vue'

const getGridData = () => {
  const data = []

  for (let i = 1; i <= 20; i++) {
    data.push({
      id: i.toString(),
      name: 'GFD科技YX公司' + i,
      area: '华东区' + i,
      disabled: i % 4 === 0
    })
  }

  return data
}

const render = ref({
  plugin: Table
})
const value = ref(['5', '6', '14', '10', '9', '11', '12'])
const data = ref(getGridData())
const columns = ref([
  {
    type: 'index',
    width: '30px'
  },
  {
    type: 'selection',
    width: '30px'
  },
  {
    field: 'name',
    title: '名称'
  },
  {
    field: 'area',
    title: '所属区域'
  }
])
const pagerOp = ref({
  pageVO: {
    pageSizes: [10, 20, 30],
    pageSize: 10
  }
})
const filterMethod = ref(function filterMethod(query, item) {
  return item.name.includes(query)
})
</script>
