<script setup lang="ts">
/**
 * 权限守卫组件
 * 根据应用角色控制子内容的显示/隐藏
 *
 * 用法：
 *   <PermissionGuard :app-id="123" permission="canManageMembers">
 *     <a-button>邀请成员</a-button>
 *   </PermissionGuard>
 *
 *   <PermissionGuard :app-id="123" :min-role="'admin'">
 *     仅管理员和 Owner 可见
 *   </PermissionGuard>
 */
import type { AppRole } from '@/api/app/appUser/model'
import { useAppPermission } from '@/composables/useAppPermission'

const props = defineProps<{
  /** 应用 ID */
  appId?: number | null
  /** 要检查的权限字段（与 canManageMembers 等对应） */
  permission?: string
  /** 最低角色要求（优先级高于 permission） */
  minRole?: AppRole
  /** 权限不足时是否显示提示（而非隐藏） */
  showTip?: boolean
}>()

const { hasPermission, hasRole, getNoPermissionTip, getAppPermission } = useAppPermission()

const hasAccess = computed(() => {
  if (!props.appId) return false
  if (props.minRole) return hasRole(props.appId, props.minRole)
  if (props.permission) return hasPermission(props.appId, props.permission as 'canManageMembers')
  return true
})

const tipText = computed(() => {
  const perm = getAppPermission(props.appId)
  return perm ? getNoPermissionTip(perm.role) : ''
})
</script>

<template>
  <slot v-if="hasAccess" />
  <slot v-else-if="showTip" name="fallback">
    <a-tooltip :title="tipText">
      <span class="text-gray-400 cursor-not-allowed">
        <slot name="disabled-content" />
      </span>
    </a-tooltip>
    </slot>
</template>
