<template>
  <div class="element-wraper-document">
    <el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    <el-tree
      :data="layers"
      show-checkbox
      draggable
      ref="tree"
      node-key="id"
      @node-drop="handleDrop"
      :filter-node-method="filterNode"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <div
          v-if="data.type == 'GroupLayer'"
          v-contextmenu:ContextMenuGroup
          :key="data.key || data.id"
        >
          <span>
            <icon-font :type="data.icon" />
          </span>
          <span>{{ data.title }}</span>
        </div>
        <div v-else v-contextmenu:ContextMenuLayer :key="data.key || data.id">
          <span>
            <icon-font :type="data.icon" />
          </span>
          <span>{{ data.title }}</span>
        </div>
      </span>
    </el-tree>
    <contextmenu ref="ContextMenuLayer" @contextmenu="handleMenuOpen">
      <content-menu-layer :layer="currentLayer" @layerMenu="handleMenuAction" />
    </contextmenu>
    <contextmenu ref="ContextMenuGroup" @contextmenu="handleMenuOpen">
      <content-menu-group :layer="currentLayer" @layerMenu="handleMenuAction" />
    </contextmenu>
  </div>
</template>
<script>
import IconFont from "../IconFont/iconfront";
import ContentMenuLayer from "./Content/ContentLayer";
import ContentMenuGroup from "./Content/ContentGroup";
import { IDocument, Layer } from "@mapgis/webclient-store";
const { LayerType, GroupLayer } = Layer;
import { directive, Contextmenu } from "v-contextmenu";
export default {
  name: "MapDocumentEle",
  components: {
    IconFont,
    ContentMenuLayer,
    ContentMenuGroup,
    Contextmenu
  },
  directives: {
    contextmenu: directive
  },
  props: {
    /*     document: {
      type: Object,
      default: () => {}
    } */
  },
  inject: {
    document: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      filterText: "",
      contentName: "",
      innerdoc: this.document,
      layers: [],
      currentLayer: {}
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.layers = this.innerdoc.layers;
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      let title = data.title;
      if (!title) return false;
      return title.indexOf(value) !== -1;
    },
    handleDrop(/* draggingNode, dropNode, dropType, ev */) {
      this.innerdoc.layers = this.layers;
    },
    allowDrop(draggingNode, dropNode) {
      if (!dropNode.data.type || dropNode.data.type != LayerType.GroupLayer) {
        return false;
      }
      return true;
    },
    allowDrag(/* draggingNode */) {
      return true;
    },
    handleMenuOpen(node) {
      let doc = IDocument.clone(this.innerdoc);
      const layer = doc.getLayerById(node.key);
      this.currentLayer = layer;
    },
    handleMenuAction(command, data) {
      // console.log(command, data);
      let doc = IDocument.clone(this.innerdoc);
      let { layer } = data;
      let { id } = layer;

      if (command === "addlayer") {
        // doc.copyLayer(id);
      } else if (command === "addgroup") {
        console.log("GroupLayer", GroupLayer);
        let group = new GroupLayer();
        doc.addLayerInGroup(group, id);
      } else if (command === "copy") {
        doc.copyLayer(id);
      } else if (command === "delete") {
        doc.deleteLayer(id);
      } else if (command === "rename") {
        doc.changeLayerProp(id, "title", data.name);
      }

      this.layers = doc.layers;
      this.innerdoc = doc;
    }
  }
};
</script>

<style lang="scss">
.element-wraper-document {
  padding: 4px;
}
.custom-tree-node {
  width: 100%;
  /*   flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px; */
  .icon {
    width: 1.25em;
    height: 1.25em;
    margin-right: 4px;
    vertical-align: -0.25em;
    overflow: hidden;
    color: #606266;
  }
}
</style>>

