import type { Directive } from 'vue'
import store from '@/store'

/**
 * 检查用户是否具备指定权限
 * 支持上下级关系：如果用户拥有 'user' 权限，则 'user:list' 也视为拥有
 */
export function hasPermission(permission: string): boolean {
  const permissions: string[] = store.state.loginInfo.permissions
  if (!permissions || !permissions.length) return false
  // 直接匹配
  if (permissions.includes(permission)) return true
  // 上级权限匹配：如果权限是 'user:list'，检查用户是否拥有 'user'
  const colonIndex = permission.indexOf(':')
  if (colonIndex !== -1) {
    const parent = permission.substring(0, colonIndex)
    if (permissions.includes(parent)) return true
  }
  return false
}

/**
 * v-permission 自定义指令
 * 用法：v-permission="'user:save'" 或 v-permission="['user:save', 'user:delete']"
 * 当传入数组时，满足其中任一权限即可显示
 */
export const permissionDirective: Directive<HTMLElement, string | string[]> = {
  mounted(el, binding) {
    const value = binding.value
    if (!value) return
    const permissions = Array.isArray(value) ? value : [value]
    const hasPerm = permissions.some(p => hasPermission(p))
    if (!hasPerm) {
      el.parentNode?.removeChild(el)
    }
  }
}