<template>
  <a-menu
    :style="{ left: position.left, top: position.top }"
    class="contextmenu"
    v-show="visible"
    @click="handleClick"
    :selectedKeys="[]"
  >
    <a-menu-item :key="item.key" v-for="item in itemList">
      <a-icon role="menuitemicon" v-if="item.icon" :type="item.icon" />{{ item.text }}
    </a-menu-item>
  </a-menu>
</template>

<script>
export default {
  name: 'Contextmenu',
  props: {
    visible: {
      type: Boolean,
      required: false,
      default: false,
    },
    position: {
      type: Object,
      required: false,
      default: () => ({ left: '0px', top: '0px' }),
    },
    itemList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  created() {
    window.addEventListener('mousedown', this.closeMenu)
  },
  methods: {
    closeMenu(e) {
      if (!e.target.closest('.contextmenu')) {
        this.$emit('update:visible', false)
      }
    },
    handleClick({ key }) {
      this.$emit('select', key)
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="less" scoped>
.contextmenu {
  position: fixed;
  z-index: 999;
  // border: 1px solid #9e9e9e;
  border-radius: 4px;
  box-shadow: 2px 2px 10px #aaaaaa !important;
}

.contextmenu /deep/ .ant-menu-item:hover {
  // background: @primary-color;
  background: #f2f2f2;
  // color: white;
}
</style>
