<template>
  <div class="wrapper-content-layer">
    <contextmenu-item disabled>
      <v-btn-toggle borderless>
        <v-btn small value="up" @click="handleUp">
          <span class="hidden-sm-and-down">上移</span>
          <v-icon right>mdi-upload</v-icon>
        </v-btn>

        <v-btn small value="down" @click="handleDown">
          <span class="hidden-sm-and-down">下移</span>
          <v-icon right>mdi-download</v-icon>
        </v-btn>
        <v-btn small value="copy" @click="handleCopy">
          <span class="hidden-sm-and-down">复制</span>
          <v-icon right>mdi-content-copy</v-icon>
        </v-btn>
      </v-btn-toggle>
    </contextmenu-item>
    <contextmenu-item disabled>
      <v-btn-toggle borderless>
        <v-btn small value="delete" @click="handleDelete">
          <span class="hidden-sm-and-down">删除</span>
          <v-icon right>mdi-delete-circle</v-icon>
        </v-btn>
        <v-btn small value="show" @click="handleShow">
          <span class="hidden-sm-and-down">显示</span>
          <v-icon right>mdi-eye</v-icon>
        </v-btn>
        <v-btn small value="hide" @click="handleHide">
          <span class="hidden-sm-and-down">隐藏</span>
          <v-icon right>mdi-eye-off</v-icon>
        </v-btn>
      </v-btn-toggle>
    </contextmenu-item>

    <contextmenu-item divider></contextmenu-item>
    <contextmenu-item :disabled="true">
      <v-text-field
        full-width
        color="#6599f9"
        dense
        solo
        rounded
        flat
        hide-details
        placeholder="重命名图层"
        label="重命名"
        v-model="layerName"
        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: "ContentMenuLayer",
  props: {
    layer: {
      type: Object
    }
  },
  components: {
    ContextmenuItem
    // IconFont
  },
  data() {
    return {
      layerName: this.layer.title || this.layer.name
    };
  },
  watch: {
    layer(value) {
      this.layerName = value.title || value.name;
    },
    layerName(value) {
      this.$emit("layerMenu", "rename", { layer: this.layer, name: value });
    }
  },
  methods: {
    handleUp() {
      this.$emit("layerMenu", "moveup", { layer: this.layer });
    },
    handleDown() {
      this.$emit("layerMenu", "movedown", { layer: this.layer });
    },
    handleDelete() {
      this.$emit("layerMenu", "delete", { layer: this.layer });
    },
    handleCopy() {
      this.$emit("layerMenu", "copy", { layer: this.layer });
    },
    handleShow() {
      this.$emit("layerMenu", "show", { layer: this.layer });
    },
    handleHide() {
      this.$emit("layerMenu", "hide", { 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>
