/**
 * v-clickOutside
 * 点击元素外部事件
 * 接收参数：function类型，点击外面时返回true,点击内部时返回false
 */
import type { Directive, DirectiveBinding } from 'vue'
interface ElType extends HTMLElement {
  __handleClick__: any
}
const directive: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== 'function') {
      throw 'callback must be a function'
    }
    el.__handleClick__ = function(e:any) {
      if (el.contains(e.target)) {
        binding.value(false)
      } else {
        binding.value(true)
      }

    }
    document.addEventListener('click', el.__handleClick__)
  },
  beforeUnmount(el: ElType) {
    document.removeEventListener('click', el.__handleClick__)
  }
}

export default directive