<!-- 右击菜单 -->
<template>
  <div v-show="showRightMenu" class="menu-style" :style="position">
    <div>
      <li v-if="isMulti === 1" @click="roomSplit">
        &nbsp;&nbsp;&nbsp;&nbsp;房间分割
      </li>
      <li @click="delectSelectFeatures">&nbsp;&nbsp;&nbsp;&nbsp;删除</li>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showRightMenu: false,
      position: {
        top: "100px",
        left: "100px",
      },
      isMulti: 1, // 1表示面单选， 2表示面多选， 3表示线单选， 4表示线多选
    };
  },
  mounted() {
    this.show();
    this.hide();
  },
  methods: {
    // 设置菜单位置
    setPosition(po) {
      this.position.top = po.top;
      this.position.left = po.left;
    },
    // 显示菜单
    show(isMulti) {
      this.showRightMenu = true;
      this.isMulti = isMulti;
    },
    // 隐藏菜单
    hide() {
      this.showRightMenu = false;
    },
     // 房间分割
    roomSplit() {
      this.hide()
      this.$emit('roomSplit')
    },
    // 删除要素
    delectSelectFeatures() {
      this.hide();
      this.$emit("delectSelectFeatures");
    },
  },
};
</script>

<style  scoped>
.menu-style {
  position: fixed;
  min-width: 140px;
  list-style: none;
  border: 1px solid #e4e7ed;
  border-bottom: 0;
  background: #fff;
  text-align: left;
  z-index: 99;
  box-shadow: rgb(0 0 0 / 30%) 0px 0px 2px, rgb(0 0 0 / 30%) 0px 4px 8px;
}
.menu-style li {
  line-height: 34px;
  font-size: 14px;
  color: #333;
  line-height: 30px;
  text-align: left;
  cursor: pointer;
  padding: 0 50px 0 20px;
  transition: all 0.3s;
}
.menu-style li:hover {
  background-color: #dedede;
  color: #0089ff;
}
</style>
