<!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu" class="contextmenu">
<!--    <div class="contextmenu__item" @click="handleOne()">增加版式</div>-->
    <div class="contextmenu__item" @click="handleTwo()">删除版式</div>
    <div class="contextmenu__item" @click="handleThree()">复制版式</div>
<!--    <div class="contextmenu__item" @click="handleFour()">增加部件</div>-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "index",
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  data () {
    return {
      row:{},
    }
  },
  methods: {
    init (row, column,event) {
      // console.log(row);
      // console.log(column);
      // console.log(event);
      this.row=row;
      // 设置菜单出现的位置
      let menu = document.querySelector('#contextmenu')
      let cha = document.body.clientHeight - event.clientY
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      if (cha < 110) {
        menu.style.top = event.pageY -150 + 'px'
      } else {
        menu.style.top = event.pageY -10 + 'px'
      }
      if(this.sidebar.opened==true){
        menu.style.left = event.clientX - 190+ 'px'
      }else {
        menu.style.left = event.clientX -30 + 'px';
      }

      document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法

    },
    foo () {
      this.$emit('foo')
    },
    handleOne () {
      this.$emit('handleOne',this.row)
    },
    handleTwo () {
      this.$emit('handleTwo',this.row)
    },
    handleThree () {
      this.$emit('handleThree',this.row)
    },
    handleFour () {
      this.$emit('handleFour',this.row)
    },
  }
}
</script>

<style scoped>
.contextmenu__item {
  display: block;
  line-height: 34px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.contextmenu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #7c7c7c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ddd;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #f6f6f6;
  border-color: #ddd;
  color: #333;
}
</style>
