import type { App } from 'vue'
import { hasPermission } from '@/utils/permission'

const display = async (el: any, binding: any) => {
  const has = hasPermission(
    binding.value?.permission || binding.value,
    binding.value?.compare || 'OR'
  )
  if (!has) {
    el.style.display = 'none'
  } else {
    delete el.style.display
  }
}

export default {
  install: (app: App) => {
    app.directive('hasPermission', {
      async created(el: any, binding: any) {
        display(el, binding)
      },
      async beforeUpdate(el: any, binding: any) {
        display(el, binding)
      }
    })
  }
}