<template>
  <v-card class="mx-3" small>
    <v-sheet small class="pa-4 primary lighten-2" color="#6599f9" style="padding:8px">
      <v-text-field
        v-model="search"
        label="搜索对应的图层"
        small
        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="忽略大小写"></v-checkbox>
    </v-sheet>
    <v-card-text>
      <v-treeview
        selected-color="#6599f9"
        color="#6599f9"
        v-model="tree"
        :items="layers"
        open-on-click
        :selectable="false"
        transition
        return-object
        hoverable
        activatable
        rounded
      >
        <template v-slot:label="{ item }">
          <div :key="item.key" v-contextmenu:ContextMenuLayer>{{item.title}}</div>
        </template>
        <template v-slot:prepend="{ }">
          <v-icon small color="#263238">mdi-eye</v-icon>
        </template>
        <template v-slot:append="{ item }">
          <v-icon v-if="isGroup(item)" small color="#46bd87">mdi-plus</v-icon>
          <v-icon small color="#00897B">mdi-arrow-up</v-icon>
          <v-icon small color="#00ACC1">mdi-arrow-down</v-icon>
          <v-icon small color="#FF7043">mdi-close</v-icon>
        </template>
      </v-treeview>
      <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-text>
  </v-card>
</template>

<script>
import { IDocument, Layer } from "@mapgis/webclient-store";
const { LayerType, GroupLayer } = Layer;
import { directive, Contextmenu } from "v-contextmenu";
import ContentMenuLayer from "./Content/ContentLayer";
import ContentMenuGroup from "./Content/ContentGroup";

export default {
  name: "MapgisDocumentVue",
  components: {
    ContentMenuLayer,
    ContentMenuGroup,
    Contextmenu
  },
  directives: {
    contextmenu: directive
  },
  inject: {
    document: {
      type: Object
    }
  },
  props: {
    handleDocument: {
      type: Function
    }
  },
  mounted() {
    if (!this.document) return;
    this.innerdoc = this.document;
    let doc = IDocument.clone(this.innerdoc);
    if (this.innerdoc && this.innerdoc.layers) {
      this.layers = doc.layers;
      // this.actives = doc.getCheckedLayers(this.innerdoc);
    } else {
      this.layers = [];
    }
  },
  created() {},
  data() {
    return {
      innerdoc: {},
      tree: [],
      layers: [],
      search: null,
      caseSensitive: false,
      currentLayer: {}
    };
  },
  watch: {
    document(doc) {
      if (doc && doc.layers) {
        this.innerdoc = doc;
      }
    }
  },
  computed: {
    filter() {
      return this.caseSensitive
        ? (item, search, textKey) => item[textKey].indexOf(search) > -1
        : undefined;
    }
  },
  methods: {
    isGroup(item) {
      return item.type === LayerType.GroupLayer;
    },
    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") {
        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);
      } else if (command === "moveup") {
        doc.changeLayerPosition(id, -1);
      } else if (command === "movedown") {
        doc.changeLayerPosition(id, 1);
      } else if (command === "show") {
        doc.changeLayerVisible(id, true);
      } else if (command === "hide") {
        doc.changeLayerVisible(id, false);
      }

      this.layers = doc.layers;
      this.innerdoc = doc;
      this.handleDocument && this.handleDocument(doc);
    }
  }
};
</script>