import { App, Directive, DirectiveBinding } from 'vue'
import { useUserStore } from '@/store/modules/user'

/**
 * 权限指令
 * 用法：
 * v-permission="'menu:get'" - 单个权限
 * v-permission="['menu:get', 'role:get']" - 多个权限(满足任意一个即可)
 * v-permission:all="['menu:get', 'role:get']" - 多个权限(需要全部满足)
 *
 * 兼容旧的v-auth指令:
 * <el-button v-auth="'add'">按钮</el-button>
 */
const permissionDirective: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const userStore = useUserStore()
    const { value, arg } = binding

    // 如果没有值，直接返回
    if (!value) return

    let hasPermission = false

    if (typeof value === 'string') {
      // 单个权限（同时检查 permissions 和 buttons）
      hasPermission = userStore.hasPermission(value) || userStore.hasButton(value)
    } else if (Array.isArray(value)) {
      // 多个权限
      if (arg === 'all') {
        // 需要全部满足
        hasPermission = value.every(
          (perm) => userStore.hasPermission(perm) || userStore.hasButton(perm)
        )
      } else {
        // 满足任意一个即可
        hasPermission = value.some(
          (perm) => userStore.hasPermission(perm) || userStore.hasButton(perm)
        )
      }
    }

    // 如果没有权限，移除元素
    if (!hasPermission) {
      el.parentNode?.removeChild(el)
    }
  }
}

export function setupPermissionDirective(app: App) {
  // 注册为 v-permission 和 v-auth (向后兼容)
  app.directive('permission', permissionDirective)
  app.directive('auth', permissionDirective)
}
