<template>
  <div v-if="hasAccess">
    <slot />
  </div>
  <div v-else-if="showFallback" class="permission-denied">
    <a-result
      status="403"
      title="权限不足"
      sub-title="抱歉，您没有访问此功能的权限。"
    >
      <template #extra>
        <a-button type="primary" @click="$router.push('/dashboard')">
          返回首页
        </a-button>
      </template>
    </a-result>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '../stores/user'

const props = defineProps({
  // 需要的权限
  permission: {
    type: [String, Array],
    default: null
  },
  // 需要的角色
  role: {
    type: [String, Array],
    default: null
  },
  // 菜单键
  menu: {
    type: String,
    default: null
  },
  // 是否显示无权限时的fallback内容
  showFallback: {
    type: Boolean,
    default: true
  }
})

const userStore = useUserStore()

const hasAccess = computed(() => {
  // 如果指定了权限要求
  if (props.permission) {
    return userStore.hasPermission(props.permission)
  }
  
  // 如果指定了角色要求
  if (props.role) {
    return userStore.hasRole(props.role)
  }
  
  // 如果指定了菜单要求
  if (props.menu) {
    return userStore.canAccessMenu(props.menu)
  }
  
  // 默认允许访问
  return true
})
</script>

<style scoped>
.permission-denied {
  padding: 20px;
  text-align: center;
}
</style>
