<template>
  <div class="demo-transfer-custom">
    <ui-transfer
      v-model="value"
      :data="data"
      :titles="['Source', 'Target']"
      :button-texts="['移除', '添加']"
      :render-content="renderFunc"
      :format="{
        noChecked: '{total}',
        hasChecked: '{checked}/{total}'
      }">
      <ui-button slot="left-footer">
        RELOAD
      </ui-button>
      <ui-button slot="right-footer">
        SURE
      </ui-button>
    </ui-transfer>
  </div>
</template>
<script>
import { Transfer, Button } from "amumu-ui"

export default {
  components: {
    "ui-button": Button,
    "ui-transfer": Transfer,
  },
  data() {
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
        })
      }
      return data
    }

    return {
      data: generateData(),
      value: [1, 4],
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        )
      },
    }
  },
}
</script>

<style lang="scss">
.mm-transfer {
  .mm-transfer-panel-footer {
    display: flex;
    align-items: center;
  }
}
</style>
