<template>
  <div class="wrapper-content-layer">
    <contextmenu-item @click="handleNewGroup">
      <icon-font type="icon-add" />新建组图层
    </contextmenu-item>
    <contextmenu-item @click="handleNewLayer">
      <icon-font type="icon-add" />新建图层
    </contextmenu-item>
    <contextmenu-item divider></contextmenu-item>
    <contextmenu-item @click="handleDelete">
      <icon-font type="icon-remove" />删除图层
    </contextmenu-item>
    <contextmenu-item @click="handleCopy">
      <icon-font type="icon-arrange-bring-forward" />复制图层
    </contextmenu-item>
    <contextmenu-item divider></contextmenu-item>
    <contextmenu-item :disabled="true">
      <v-text-field color="6599f9" placeholder="重命名图层" dense label="重命名" v-model="name" outlined></v-text-field>
      <!-- <el-input v-model="name" placeholder="重命名图层" size="mini" /> -->
    </contextmenu-item>
  </div>
</template>
<script>
import IconFont from "../../IconFont/iconfront";
import "v-contextmenu/dist/index.css";
import {
  ContextmenuItem
  /* ContextmenuSubmenu,
  ContextmenuGroup */
} from "v-contextmenu";
export default {
  name: "ContentMenuGroup",
  props: {
    layer: {
      type: Object
    }
  },
  components: {
    ContextmenuItem,
    IconFont
  },
  data() {
    return {
      name: this.layer.title || this.layer.name
    };
  },
  watch: {
    name(value) {
      this.$emit("layerMenu", "rename", { layer: this.layer, name: value });
    }
  },
  methods: {
    handleNewGroup() {
      this.$emit("layerMenu", "addgroup", { layer: this.layer });
    },
    handleNewLayer() {
      this.$emit("layerMenu", "addlayer", { layer: this.layer });
    },
    handleDelete() {
      this.$emit("layerMenu", "delete", { layer: this.layer });
    },
    handleCopy() {
      this.$emit("layerMenu", "copy", { layer: this.layer });
    }
  }
};
</script>

<style lang="scss">
.wrapper-content-layer {
  .icon {
    width: 1.25em;
    height: 1.25em;
    margin-right: 4px;
    vertical-align: -0.25em;
    overflow: hidden;
    color: #606266;
  }
}
</style>
