import { watchEffect, type Directive } from 'vue'
import { usePermissionStore } from '@/stores/modules/permission'

const stops = new WeakMap<HTMLElement, () => void>()

/**
 * v-permission 指令：当前用户不具备指定权限码（且非超管）时隐藏元素。
 * 用法：v-permission="'user:create'" 或 v-permission="['user:create', 'user:update']"（任一满足即可）。
 * 权限异步加载：用 watchEffect 响应式隐藏/恢复，权限加载完成后自动显示。
 */
export const vPermission: Directive<HTMLElement, string | string[]> = {
  mounted(el, binding) {
    const store = usePermissionStore()
    const required = (Array.isArray(binding.value) ? binding.value : [binding.value]).filter(Boolean) as string[]
    if (required.length === 0) return
    const stop = watchEffect(() => {
      el.style.display = store.hasAny(required) ? '' : 'none'
    })
    stops.set(el, stop)
  },
  unmounted(el) {
    stops.get(el)?.()
    stops.delete(el)
  },
}