<!-- 菜单页代码  contextButton/index.vue -->
<template>
  <div id="contextmenu1" class="contextmenu">
    <div @mouseleave="mouseLeave"  style="position: relative">
      <div class="contextmenu__item" style="position: relative"  @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="handleTwo2()">退回</div>
<!--      <div class="contextmenu__item" @click="handlestart()">{{btnListReal[0].name}}</div>-->

      <div  @mouseleave="mouseLeave" v-show="machineShow"  class="machine-con">
        <div
          @click="handleThree2(item,indexItem)"
          class="machine-item"
          v-show="activeIndexReal!=indexItem"
          v-for="(item,indexItem) in machineInfListReal"
          :key="indexItem"
        >{{item.feedbackGroupName}}
        </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: {
    btnList: Array,
    machineInfList: Array,
    activeIndex:Number
  },
  data () {
    return {
      machineShow:false,
      row:{},
      btnListReal: this.btnList,
      machineInfListReal: this.machineInfList,
      activeIndexReal: this.activeIndex
    }
  },
  methods: {
    mouseOver2(){
      this.machineShow = false;
    },
    mouseLeave(){
      this.machineShow = false;
    },
    mouseOver(){
      this.machineShow = true;
    },
    init1 (row, column,event) {
      // console.log(row);
     this.row=row;
      // console.log(event.pageX);
      // console.log(event.pageY);
      // 设置菜单出现的位置
      // 具体显示位置根据自己需求进行调节
      let menu = document.querySelector('#contextmenu1')
      // console.log(menu);
      // let cha = document.body.clientHeight - event.clientY
      // // console.log(document.body.clientHeight,event.clientY,cha)
      // // 防止菜单太靠底，根据可视高度调整菜单出现位置
      // if (cha < 150) {
      //   menu.style.top = event.clientY +10 + 'px'
      // } else {
      //   menu.style.top = event.clientY +290 + 'px'
      // }
      // menu.style.top = event.pageY+ 'px';
      // menu.style.left = event.pageX-150+ 'px';
      if (event.clientX > 1800) {
        if(this.sidebar.opened==true){
          menu.style.left = event.clientX - 190 + 'px';
        }else {
          menu.style.left = event.clientX -30 + 'px';
        }

      } else {
        if(this.sidebar.opened==true){
          menu.style.left = event.clientX - 190 + 'px';
        }else {
          menu.style.left = event.clientX -30 + 'px';
        }
      }
      if (event.clientY > 700) {
        menu.style.top = event.clientY - 30 + 'px';
      } else {
        menu.style.top = event.clientY - 10 + 'px';
      }
      document.addEventListener('click', this.foo1) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法

    },
    foo1 () {
      this.$emit('foo1')
    },
    handleOne () {
      this.$emit('handleOne',this.row)
    },
    handlestart () {
      this.$emit('handlestart',this.row)
    },
    handleTwo2 () {
      this.$emit('handleTwo2',this.row)
    },
    handleThree2 (item,index,row) {
      this.$emit('handleThree2',item,index,this.row)
    },
    handleFour () {
      this.$emit('handleFour',this.row)
    },
  },
  watch: {
    btnList() {
      this.btnListReal = this.btnList
    },
    machineInfList() {
      this.machineInfListReal = this.machineInfList
    },
    activeIndex() {
      this.activeIndexReal = this.activeIndex
    }

  }
}
</script>

<style scoped>
.machine-item{
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}
.machine-con{
  position: absolute;
  top: 0px;
  left: 150px;
  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>
