<template>
    <div class="ht-base-transfer-filterable-demo">
        <ht-base-transfer
                :data="data2"
                :target-keys="targetKeys2"
                filterable
                :filter-method="filterMethod"
                @on-change="handleChange2">
        </ht-base-transfer>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseTransferFilterableDemo',
      data () {
          return {
              data2: this.getMockData(),
              targetKeys2: this.getTargetKeys()
          }
      },
      methods: {
          getMockData () {
              let mockData = [];
              for (let i = 1; i <= 20; i++) {
                  mockData.push({
                      key: i.toString(),
                      label: 'Content ' + i,
                      description: 'The desc of content  ' + i,
                      disabled: Math.random() * 3 < 1
                  });
              }
              return mockData;
          },
          getTargetKeys () {
              return this.getMockData()
                  .filter(() => Math.random() * 2 > 1)
                  .map(item => item.key);
          },
          handleChange2 (newTargetKeys) {
              this.targetKeys2 = newTargetKeys;
          },
          filterMethod (data, query) {
              return data.label.indexOf(query) > -1;
          }
      }
  }
</script>
<style>
    .ht-base-transfer-filterable-demo {

    }
</style>

