import { message } from 'ant-design-vue'
import { Directive, onUnmounted, DirectiveBinding } from 'vue'

export const keyboard: Directive = {
  mounted (el: HTMLDivElement, binding: DirectiveBinding) {
    const key = binding.arg
    console.log('key:', el, binding)

    const handleKeyPress = (event) => {
      console.log(event)

      if (event.key === key) {
        binding.value() // 执行绑定的方法
      }
    }

    el.addEventListener('keydown', () => {
      console.log('keydown')
    })

    el.addEventListener('keyup', () => {
      console.log('keyup')
    })

    el.addEventListener('keypress', handleKeyPress)

    // 在组件卸载时移除事件监听器
    onUnmounted(() => {
      el.removeEventListener('keypress', handleKeyPress)
    })
  }

}

export const copy = {
  mounted (el: HTMLElement, binding: DirectiveBinding) {
    el.addEventListener('click', () => {
      const inputValue = document.createElement('input')
      document.body.appendChild(inputValue)
      inputValue.value = el.innerHTML
      inputValue.select()
      document.execCommand('copy')
      message.success('复制成功')
      document.body.removeChild(inputValue)
    })

    onUnmounted(() => {
      el.removeEventListener('click', () => {})
    })
  }
}