<template>
  <v-card class="mx-auto" max-width="500">
    <v-sheet class="pa-4 lighten-2">
      <v-text-field
        v-model="search"
        label="Search Company Directory"
        dark
        flat
        solo-inverted
        hide-details
        clearable
        clear-icon="mdi-close-circle-outline"
      ></v-text-field>
      <v-checkbox v-model="caseSensitive" dark hide-details label="Case sensitive search"></v-checkbox>
    </v-sheet>
    <v-card-text>
      <v-treeview :items="layers" :search="search" :filter="filter" :open.sync="open">
        <template v-slot:prepend="{ item }">
          <v-icon
            v-if="item.children"
            v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
          ></v-icon>
        </template>
      </v-treeview>
    </v-card-text>
    <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>
  </v-card>
</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: {
    ContentMenuLayer,
    ContentMenuGroup,
    Contextmenu
  },
  directives: {
    contextmenu: directive
  },
  props: {
    /*     document: {
      type: Object,
      default: () => {}
    } */
  },
  inject: {
    document: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      open: [1, 2],
      search: null,
      caseSensitive: false,
      innerdoc: this.document,
      layers: [],
      currentLayer: {}
    };
  },
  computed: {
    filter() {
      return this.caseSensitive
        ? (item, search, textKey) => item[textKey].indexOf(search) > -1
        : undefined;
    }
  },
  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;
}
</style>>



