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

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

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

const emit = defineEmits<{
  (e: 'loginSuccess'): void;
}>();

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

watch(isLogged, (newVal) => {
  if (newVal) {
    emit('loginSuccess');
  }
})

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