<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>
