export const vContentMenu = {
  mounted: (el: Element, binding: { value: any }) => {
    const { value } = binding
    el.addEventListener('contextmenu', (e: any) => {
      e.preventDefault()
      const contentMenu = document.querySelector('.vContentMenu')
      if (contentMenu) {
        contentMenu.remove()
      }
      const menuDom: HTMLUListElement = document.createElement('ul')
      menuDom.setAttribute('class', 'vContentMenu')
      const { x, y } = e
      console.log(x, y)
      menuDom.setAttribute(
        'style',
        `
          width: fit-content;
          background: #595959;
          padding: 7px;
          margin: 0;
          position: fixed;
          top: ${y}px;
          left: ${x}px;
        `,
      )
      el.appendChild(menuDom)
    })

    el.addEventListener('click', () => {
      const contentMenu = document.querySelector('.vContentMenu')
      if (contentMenu) {
        contentMenu.remove()
      }
    })
  },
}