<template>
  <div ref="modalRef"
       class="tabs_item 小手指"
       v-if="modal"
       :style="displayLocation">
    <slot v-if="slots"/>
    <ul v-else>
      <li v-for="(item,index) in props.config" @click="handlingClickEvents(item.click)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup name='RightClickMenu'>
import {ref} from "vue";
import {onClickOutside} from '@vueuse/core'

const props = defineProps({
  config: {
    type: Array,
    default: [{
      name: '请设置', click: () => {
        console.warn('请先设置')
      }
    }]
  },
  mousePosition: {
    type: Object,
    default: {}
  },
  closeManually: {
    type: Boolean,
    default: false
  }
})


const modal = ref(false)
const modalRef = ref(null)

onClickOutside(modalRef, () => {
  if (!props.closeManually) {
    modal.value = false
  }
})

let displayLocation = $ref({
  left: '0px',
  top: '0px'
})

const handlingClickEvents = (cb) => {
  cb(props.mousePosition.data, props.mousePosition.index)
  modal.value = false
}

watch(() => props.mousePosition, () => {
  modal.value = true
  nextTick(() => {
    calculateTheLocation(props.mousePosition.event.pageX, props.mousePosition.event.pageY)
  })
})

const calculateTheLocation = (x, y) => {

  const {innerWidth: windowWidth, innerHeight: windowHeight} = window;

  const menu = modalRef.value;
  const menuHeight = menu.offsetHeight;
  const menuWidth = menu.offsetWidth


  if (menuWidth + x + 20 >= windowWidth) {
    displayLocation.left = x - menuWidth + 'px';
  } else {
    displayLocation.left = x + 'px';
  }

  if (menuHeight + y + 20 >= windowHeight) {
    displayLocation.top = y - menuHeight + 'px'
  } else {
    displayLocation.top = y + 'px';
  }
}

const close = () => {
  modal.value = false
}

defineExpose({
  close
})

let slots = $ref(false)
onMounted(() => {
  if (!!useSlots().default) {
    slots = true
  }
})

</script>

<style scoped lang="scss">
.tabs_item {
  position: fixed;
  text-align: center;
  margin: 5px;
  padding: 5px;
  z-index: 100;
  background-color: white;
  box-shadow: 2px 2px 3px 0 rgb(4 4 4);
  border-radius: 5px;

  li {
    margin: 3px 0;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
    line-height: 20px;

    &:hover {
      background-color: rgba(78, 80, 84, 0.63);
      color: white;
    }
  }
}
</style>
