<!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu" class="contextmenu">
    <div @mouseleave="mouseLeave"  style="position: relative">
      <div class="contextmenu__item" style="position: relative" @click="handleOne()"  @mouseover="mouseOver" >分配机台 <span style="position: absolute;right: 5px;top: 0px"><i class="el-icon-arrow-right"></i></span></div>
      <div class="contextmenu__item"  @mouseover="mouseOver2" @click="handleTwo()">退回</div>
      <div  @mouseleave="mouseLeave" v-show="machineShow"  class="machine-con">
        <div
          @click="handleThree(item,indexItem)"
          class="machine-item"
          v-for="(item,indexItem) in machineInfListReal"
          :key="indexItem"
        >{{item.machineName}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  scheduleBreedTask
} from '@/api/printbill/breedTasks/breedTasks.js'
import { mapGetters } from 'vuex'
export default {
  name: "index",
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  props: {
    machineInfList: Array
  },
  data () {
    return {
      machineShow:false,
      row:{},
      machineInfListReal: this.machineInfList
    }
  },
  methods: {
    mouseOver2(){
      this.machineShow = false;
    },
    mouseLeave(){
      this.machineShow = false;
    },
    mouseOver(){
      this.machineShow = true;
    },
    init (row, column,event) {
      // console.log(row);
     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 (item,index) {
      this.$emit('handleThree',item,index)
    },
    handleFour () {
      this.$emit('handleFour',this.row)
    },
  },
  watch: {
    machineInfList() {
      this.machineInfListReal = this.machineInfList
    },

  }
}
</script>

<style scoped>
.contextmenu{
  width: 150px;
  height: auto;
}
.machine-item{
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}
.machine-con{
  position: absolute;
  top: 0px;
  left: 148px;
  background: #fff;
  border: 1px solid #ddd;
  max-height: 240px;
  overflow-y: auto;
}
.contextmenu__item {
  display: block;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  width: 150px;
}
.machine-item:hover{
  background: #F6F6F6;
  color: #333;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}
.contextmenu {
  position: absolute;
  background-color: #fff;
  /*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;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #f6f6f6;
  border-color: #ddd;
  color: #333;
}
</style>
