<template>
  <div class="transfer-tree-instance part-box">
    <transfer-tree
      :data="list"
      :targetKeys="targetKeys"
      @on-change="changeKeys"
    ></transfer-tree>
  </div>
</template>

<script>
import TransferTree from "@/components/common/TransferTree";

const list = [];
for (let i = 0; i < 3; i++) {
  let parent = {
    title: "parent " + i,
    key: "p-" + i,
    expand: true,
    selected: false,
    children: []
  };

  for (let j = 0; j < 5; j++) {
    let child = {
      title: "child-" + i + "-" + j,
      key: "child-" + i + "-" + j
      // disabled: Math.random() > 0.5
    };
    parent.children.push(child);
  }
  list.push(parent);
}
const targetKeys = ["child-0-2", "child-0-3", "child-1-0", "child-1-1"];

export default {
  name: "transfer-tree-instance",
  components: {
    TransferTree
  },
  data() {
    return {
      list,
      targetKeys
    };
  },
  methods: {
    changeKeys({ selectedKeys, direction, moveKeys, selectedTitles }) {
      console.log(selectedKeys, direction, moveKeys, selectedTitles);
    }
  }
};
</script>

<style></style>
