<template>
  <div class="treeList">
    <div class="tree-body">
      <a-tree
        v-model="checkedKeys"
        checkable
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @expand="onExpand"
        @select="onSelect"
      />
    </div>

    <div class="btn-list">
      <a-button type="link">恢复默认</a-button>
      <a-button>取消</a-button>
      <a-button type="primary">按钮</a-button>
    </div>
  </div>
</template>
<script>
import { queryByGroup } from "@/api/editer.js";
const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" }
        ]
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" }
        ]
      },
      {
        title: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" }
    ]
  },
  {
    title: "0-2",
    key: "0-2"
  }
];
export default {
  data() {
    return {
      expandedKeys: ["", ""],
      autoExpandParent: true,
      checkedKeys: [""],
      selectedKeys: [],
      treeData
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    }
  },
  methods: {
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
    queryByGroup() {
      queryByGroup().then(res => {
        this.treeData = this.mapTree(res.Content);
      });
    },
    mapTree(tree) {
      const newTree = [];
      tree.forEach(item => {
        if (item.Category && item.Category.length) {
          const children = this.mapTree(item.Category);
          newTree.push({
            title: item.Name,
            key: item.Id,
            children
          });
        } else {
          newTree.push({
            title: item.Name,
            key: item.Id,
            children: []
          });
        }
      });
      return newTree;
    }
  },

  created() {
    this.queryByGroup();
  }
};
</script>
<style lang="less">
.treeList {
  width: 240px;
  .tree-body {
    height: 420px;
    overflow-y: auto;
  }
}
</style>