<!-- 菜单页代码  公用的右键菜单代码-->
<template>
  <div id="contextmenu" class="contextmenu">
    <div class="contextmenu__item" @click="handleOne()">{{btnListReal[0].name}}</div>
    <div v-show="assembleShow" class="contextmenu__item" @click="handleAssemble()">添加出版备注</div>
<!--    <div v-show="!btnShowReal" class="contextmenu__item" @click="handleTwo()">{{btnListReal[1].name}}</div>-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "index",
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  props: {
    btnList: Array,
    btnShow: Boolean
  },
  data () {
    return {
      assembleShow:false,
      row:{},
      btnListReal: this.btnList,
      btnShowReal: this.btnShow
    }
  },
  methods: {
    init (row, column,event) {
      // console.log(row);
     this.row=row;
      // 设置菜单出现的位置
      // 具体显示位置根据自己需求进行调节
      let menu = document.querySelector('#contextmenu')
      let cha = document.body.clientHeight - event.clientY;
      // console.log(document.body.clientHeight,event.clientY,cha)
      // 防止菜单太靠底，根据可视高度调整菜单出现位置
      if (cha < 150) {
        menu.style.top = event.clientY + 'px'
      } else {
        menu.style.top = event.clientY -90 + '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)
    },
    handleAssemble(){
      this.$emit('handleAssemble',this.row)
    },
    handleTwo () {
      this.$emit('handleTwo',this.row)
    },
    handleThree () {
      this.$emit('handleThree',this.row);
    },
    handleFour () {
      this.$emit('handleFour',this.row)
    },
  },
  watch: {
    btnList() {
      this.btnListReal = this.btnList
    },
    btnShow() {
      this.btnShowReal = this.btnShow
    }
  }

}
</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>
