import type { App } from 'vue'
import { useUserStore } from '@/store'

/**
 * 权限指令
 *
 * 用法：
 *   <el-button v-hasPermi="'park:park-lot:create'">新增</el-button>
 *   <el-button v-hasPermi="['park:park-lot:create', 'park:park-lot:update']">保存</el-button>  // 任一命中即可
 *   <el-button v-hasRole="'super_admin'">超级操作</el-button>
 *
 * 权限标识命名规范：模块:资源:动作（与后端 @PreAuthorize("@ss.hasPermission('...')") 完全一致）。
 * 指令只是「隐藏入口」，真正的鉴权在后端——前端隐藏不作为安全边界。
 */
function checkAndRemove(el: HTMLElement, allowed: boolean) {
  if (!allowed) {
    el.parentNode?.removeChild(el)
  }
}

export function setupDirectives(app: App) {
  app.directive('hasPermi', {
    mounted(el: HTMLElement, binding) {
      const userStore = useUserStore()
      checkAndRemove(el, userStore.hasPermission(binding.value))
    }
  })

  app.directive('hasRole', {
    mounted(el: HTMLElement, binding) {
      const userStore = useUserStore()
      checkAndRemove(el, userStore.hasRole(binding.value))
    }
  })
}

export default setupDirectives