<script setup>
import { onBeforeUnmount, onMounted } from 'vue';
import { RouterView } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { uiStore } from '@/stores/ui';
import { sessionStore } from '@/stores/session';

const router = useRouter();
const route = useRoute();
function sessionExpired() {
  sessionStore.clearSession();
  uiStore.notify('登录状态已失效', '请重新登录后继续办理', 'warning');
  if (route.path !== '/auth/login') router.replace({ path: '/auth/login', query: { redirect: route.fullPath } });
}
onMounted(() => window.addEventListener('eis:session-expired', sessionExpired));
onBeforeUnmount(() => window.removeEventListener('eis:session-expired', sessionExpired));
</script>

<template>
  <RouterView />
  <Transition name="toast">
    <aside v-if="uiStore.state.toast" :class="['app-toast', `is-${uiStore.state.toast.tone}`]" role="status">
      <strong>{{ uiStore.state.toast.title }}</strong>
      <span>{{ uiStore.state.toast.message }}</span>
    </aside>
  </Transition>
  <Teleport to="body">
    <div v-if="uiStore.state.modal" class="app-modal-backdrop" @click.self="uiStore.closeModal()">
      <component :is="uiStore.state.modal.component" v-bind="uiStore.state.modal.props" @close="uiStore.closeModal()" />
    </div>
  </Teleport>
</template>
