<template>
  <div>
    <c-split-panel :width="'300'">
      <template #left-content>
        <c-tree v-bind="$attrs"> </c-tree>
      </template>
      <template #right-content>
        <slot name="right-card"></slot>
      </template>
    </c-split-panel>
  </div>
</template>
<script lang="ts">
import type { TreeProps } from "ant-design-vue";
import { difference } from "lodash";
import { defineComponent, ref, watch } from "vue";

const treeData: TreeProps["treeData"] = [
  {
    title: "parent 1",
    tag: "标签",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        children: [
          { title: "leaf", key: "0-0-0-0" },
          { title: "leaf", key: "0-0-0-1" },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [{ key: "0-0-1-0", title: "sss" }],
      },
    ],
  },
  {
    title: "parent 2",
    key: "1-0",
    children: [
      {
        title: "parent 2-0",
        key: "1-0-0",
      },
      {
        title: "parent 2-1",
        key: "2-0-1",
      },
    ],
  },
];

export default defineComponent({
  name: "c-tree-card",
  setup() {
    const expandedKeys = ref<string[]>([]);
    const selectedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
    const checkedKeys = ref<string[]>([]);
    watch(expandedKeys, () => {
      console.log("expandedKeys", expandedKeys);
    });
    watch(selectedKeys, () => {
      console.log("selectedKeys", selectedKeys);
    });
    watch(checkedKeys, () => {
      console.log("checkedKeys", checkedKeys);
    });
    const handleExpand = (keys: string[], { expanded, node }) => {
      // node.parent add from 3.0.0-alpha.10
      const tempKeys = (
        (node.parent ? node.parent.children : treeData) || []
      ).map(({ key }) => key);
      if (expanded) {
        expandedKeys.value = difference(keys, tempKeys).concat(node.key);
      } else {
        expandedKeys.value = keys;
      }
    };
    const addNode = (item) => {
      console.log(item);
    };

    /*实现单选树节点操作*/
    const checkFunc = (val, e) => {
      console.log(val);
      console.log(e);
      checkedKeys.value = [e.node.key];
      console.log(checkedKeys.value);
    };
    return {
      treeData,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      handleExpand,
      addNode,
      checkFunc,
    };
  },
});
</script>

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