<template>
  <a-tree
    checkable
    draggable
    @expand="onExpand"
    @select="onSelect"
    @drop="onDropChange"
    :autoExpandParent="autoExpandParent"
    :selectedKeys="selectedKeys"
    :treeData="layers"
  >
    <!-- <template slot="custom" slot-scope="node">
      <icon-font :type="this.custom(node)" />
    </template>-->
  </a-tree>
</template>
<script>
// import IconFont from "../IconFont/iconfront";
import { IDocument, Layer } from "@mapgis/webclient-store";
const { LayerType } = Layer;
export default {
  name: "MapDocumentAntd",
  components: {
    /* IconFont */
  },
  props: {},
  inject: {
    document: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      layers: []
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    }
  },
  created() {
    this.layers = this.document.layers;
  },
  methods: {
    custrom(node) {
      console.log("node", node);
    },
    onDropChange(info) {
      console.log("drop", this);
      let document = this.document;
      let idoc = IDocument.clone(document);
      let { node, dragNode, dropPosition } = info;

      const dropKey = node.eventKey;
      const dragKey = dragNode.eventKey;
      const dropPos = node.pos.split("-");
      dropPosition = dropPosition - Number(dropPos[dropPos.length - 1]);

      let dropLayer = idoc.getLayerById(dropKey);
      let dragLayer = idoc.getLayerById(dragKey);

      if (!dragLayer) return;
      //dropPosition => -1 上面  0 里面  1 下面
      if (dragLayer && !dropLayer) {
        idoc.deleteLayer(dragKey);
        idoc.addLayerInGroup(dragLayer, undefined);
        /* dispatch(updateLayers(idoc.layers));
        dispatch(toggleInvalidate(false)); */
      } else {
        if (dragLayer.type != LayerType.GroupLayer) {
          if (dropLayer.type == LayerType.GroupLayer) {
            idoc.deleteLayer(dragKey);
            if (dropPosition == 0) {
              idoc.addLayerInGroup(dragLayer, dropKey);
            } else if (dropPosition == -1) {
              idoc.addLayerNearLayer(dragLayer, dropKey, true);
            } else {
              idoc.addLayerNearLayer(dragLayer, dropKey, false);
            }
            //dispatch(updateLayers(idoc.layers));
            //dispatch(toggleInvalidate(false));
          } else {
            idoc.deleteLayer(dragKey);
            if (dropPosition == -1) {
              idoc.addLayerNearLayer(dragLayer, dropKey, true);
            } else {
              idoc.addLayerNearLayer(dragLayer, dropKey, false);
            }

            //dispatch(updateLayers(idoc.layers));
            //dispatch(toggleInvalidate(false));
          }
        } else {
          // ...
        }
        this.layers = idoc.layers;
      }
      // this.InvalidateDelay();
    },
    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;
    }
  }
};
</script>