<script setup lang="tsx">
import ModalAuthentication from '~/components/ModalAuthentication.vue'

const loginState = useLoginState()

defineProps({
  contentClass: {
    type: String,
    default: '',
  },
  needAdmin: {
    type: Boolean,
    default: false,
  },
})

const modal = useModal()
</script>

<template>
  <ClientOnly>
    <div v-if="!loginState.is_logged_in"
         class="w-full flex flex-col justify-center items-center gap-2 py-40">
      <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
      <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
      <UButton
        class="mt-2 font-bold"
        color="black"
        size="xs"
        variant="solid"
        @click="modal.open(ModalAuthentication)"
      >
        登录
      </UButton>
    </div>
    <div v-else-if="needAdmin && loginState.user.auth_code !== 2"
         class="w-full flex flex-col justify-center items-center gap-2 py-40">
      <Icon class="text-7xl text-neutral-300 dark:text-neutral-700" name="tabler:hand-stop"/>
      <p class="text-sm text-neutral-500 dark:text-neutral-400">账号没有权限</p>
    </div>
    <div :class="contentClass" v-else>
      <slot/>
    </div>
  </ClientOnly>
</template>

<style scoped>

</style>