import type { Directive, DirectiveBinding } from 'vue'
import { useUserStore } from '@/store'

type AuthValue = string | string[]

function normalize(binding: DirectiveBinding<AuthValue>): string[] {
  const value = binding.value
  if (Array.isArray(value)) return value
  return value ? [value] : []
}

/** 校验不通过时直接移除 DOM 节点，而非仅禁用 */
function check(
  el: HTMLElement,
  binding: DirectiveBinding<AuthValue>,
  checker: (code: string) => boolean,
) {
  const codes = normalize(binding)
  if (!codes.length) return

  const passed = codes.some(checker)
  if (!passed) {
    el.remove()
  }
}

/** 按钮级权限：v-hasPerm="'sys:user:add'" 或 v-hasPerm="['sys:user:add']" */
export const hasPerm: Directive<HTMLElement, AuthValue> = {
  mounted(el, binding) {
    check(el, binding, (code) => useUserStore().hasPermission(code))
  },
}

/** 角色级权限：v-hasRole="'ADMIN'" */
export const hasRole: Directive<HTMLElement, AuthValue> = {
  mounted(el, binding) {
    check(el, binding, (code) => useUserStore().hasRole(code))
  },
}