<template>
  <div class="menu-wrap" :id="'menu'+menuId">
      <ul>
          <li v-for="item in menu" :key="item.id" @mousedown.stop="handleClick(item)" @mouseup.stop>
            <span :style="`color:${item.text==='粘贴元素'&&!item.canClick?'#999':'#333'}`"><i class="el-icon-check" v-if="item.id===5&&modelName==='paint'"></i>{{item.text}}</span>
            </li>
      </ul>
  </div>
</template>

<script>
export default {
    props:{
        menu:{//菜单项
            type:Array,
            default:()=>{
                return [
                    {
                        id:1,
                        text:'上一张',
                        eventName:'prev'
                    },
                    {
                        id:2,
                        text:'下一张',
                        eventName:'next'
                    },
                    /* {
                      id:5,
                      text:'画笔模式',
                      eventName:'paint'
                    }, */
                    {
                        id:3,
                        text:'退出全屏',
                        eventName:'exit'
                    },
                    {
                        id:4,
                        text:'取消',
                        eventName:'cancel'
                    }
                ]
            }
        },
        modelName:{
          type:String,
          default:'mouse'
        },
        menuId:{//指定id
          type:String,
          default:''
        }
    },
  data() {
    return {

    };
  },
  methods: {
      cancel(){
          //console.log('cancel')
          this.$emit('cancel')
      },
      prev(){
          this.$emit('prev')
      },
      next(){
          this.$emit('next')
      },
      exit(){
          this.$emit('exit')
      },
      paint(){
        this.$emit('paint')
      },
      paste(){
        this.$emit('paste')
      },
      handleClick(item){
          if((!item.canClick&&item.text==='粘贴元素')) return
          this[`${item.eventName}`]()
      }
  },
};
</script>

<style scoped lang="scss">
.menu-wrap{
    position:fixed;
    display: none;
    z-index: 1000;
    ul{
        list-style: none;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #999999;
        li{
            cursor: pointer;
            width:120px;
            height:40px;
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #999999;
            &:last-child{
                margin-bottom: 0;
            }
            &:hover{
                background-color: rgba(153,153,153,0.1);
            }
            span{
              i{
                font-weight: bold;
                margin-right:5px;
              }
            }
        }
    }
}
</style>
