<template>
  <slot v-if="isLogged" />
  <FlexCol v-else center :height="300" :gap="30">
    <Icon name="smile-filling" :size="80" />
    <Text :text="unLoginMessage" textAlign="center" fontConfig="subText" />
    <Button :innerStyle="{width: '50%'}" type="primary" @click="goLogin">去登录</Button>
  </FlexCol>
</template>

<script setup lang="ts">
import Button from '@/components/basic/Button.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import { navTo } from '@/components/utils/PageAction';
import { useAuthStore } from '@/store/auth';
import { computed } from 'vue';

const authStore = useAuthStore();
const isLogged = computed(() => authStore.isLogged);

defineProps({	
  unLoginMessage : {
    type: String,
    default: '登录后享受更多权益'
  },
})

function goLogin() {
  navTo('/pages/user/login');
}
</script>