<template>
  <div class="home">
    <div class="home-head">
      <div>
        <h1 class="home-title">图片导出工具</h1>
      </div>
      <div class="home-action">
        <div class="home-action-item">
          <svg-icon name="icon-home" fill="#BFBFBF" />
          <span :title="userStore.curSchoolInfo.name">{{
            userStore.curSchoolInfo.name
          }}</span>
        </div>
        <div class="home-action-item">
          <svg-icon name="icon-user" fill="#BFBFBF" />
          <span :title="userStore.realName">{{ userStore.realName }}</span>
        </div>
        <a-tooltip content="退出登录" position="br">
          <div class="home-action-item cursor" @click="toLogout">
            <svg-icon name="icon-logout" />
          </div>
        </a-tooltip>
      </div>
    </div>
    <div class="home-body">
      <!-- home-view: page detail -->
      <div class="home-view">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useUserStore } from '@/store';
  import { modalConfirm } from '@/utils/arco';

  defineOptions({
    name: 'DefaultLayout',
  });

  const userStore = useUserStore();

  async function toLogout() {
    const confirmRes = await modalConfirm('提示', `确定要退出登录吗？`).catch(
      () => false
    );
    if (confirmRes !== 'confirm') return;
    userStore.logout();
  }
</script>
