<template>
  <template v-if="visibility === 'interactive'">
    <slot />
  </template>
  <div v-else-if="visibility === 'readonly'" class="pg-readonly" :title="`${widgetId} 当前为只读`">
    <slot />
    <div class="pg-mask" />
  </div>
  <!-- hidden: 不渲染任何内容 -->
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

const props = defineProps<{ widgetId: string }>()
const auth = useAuthStore()
const visibility = computed(() => auth.widgetOf(props.widgetId))
</script>

<style scoped>
.pg-readonly { position: relative; }
.pg-mask {
  position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3);
  pointer-events: all; cursor: not-allowed;
}
</style>
