<template>
  <div v-if="hasPermission">
    <slot />
  </div>
  <div v-else class="no-permission">
    <Login v-if="!isLoggedIn()" />
    <template v-else>
      无权限查看此内容
    </template>
  </div>
</template>

<script>
import { checkPermission, getCurrentUserRole, isLoggedIn, showLoginModal } from '../../utils/auth';

export default {
  props: ['requiredPerm'],
  methods: {
    isLoggedIn() {
      return isLoggedIn();
    }
  },
  computed: {
    hasPermission() {
      if (!isLoggedIn()) {
        showLoginModal();
        return false;
      }
      const role = getCurrentUserRole();
      return checkPermission(role, this.requiredPerm);
    }
  },
  mounted() {
    if (!isLoggedIn()) {
      showLoginModal();
    }
  }
}
</script>
