<template>
  <el-tooltip v-if="!allowed && tooltip" :content="reason" placement="top">
    <span class="perm-wrapper perm-disabled">
      <slot />
    </span>
  </el-tooltip>
  <span v-else-if="!allowed" class="perm-wrapper perm-disabled">
    <slot />
  </span>
  <span v-else class="perm-wrapper">
    <slot />
  </span>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { usePermission } from "../utils/permission";

const props = defineProps<{
  action: string;
  tooltip?: boolean;
}>();

const { can, reason: reasonFn } = usePermission();
const allowed = computed(() => can(props.action));
const reason = computed(() => reasonFn(props.action));
</script>

<style scoped>
.perm-wrapper {
  display: inline-block;
}
.perm-disabled {
  opacity: 0.55;
  pointer-events: none;
}
</style>
