<template>
    <header>
        <div class="title"><router-link to="/"><img :src="logo" alt="로고"></router-link></div>
        <Menu></Menu>
        <div class="user-info">
            <div class="user-name">
                <router-link to="/MyPage.page"><img :src="accounticon" alt="">관리자</router-link>
            </div>
            <button @click="logout" class="user-logout"><img :src="logouticon" alt=""></button>
        </div>
    </header>
</template>

<script>
import Menu from '../layout/Menu.vue';
import { logoutProc } from "../../resources/api/login.js";

export default {
    data() {
        return {
            logo: "/client/resources/img/logo.png",
            accounticon: "/client/resources/img/account.png",
            logouticon: "/client/resources/img/logout.png",
        };
    },
    methods: {
        async logout(){
            try{
            const response = await logoutProc();
            // 스토어 초기화
            this.$store.commit('setStoreReset');

            localStorage.removeItem('isLoggedIn');
            this.$router.push('/login.page');
            } catch (error) {
                console.error("로그아웃 중 오류 발생:", error);
                alert("로그아웃에 실패했습니다. 다시 시도해주세요.");
            }
        }
    },
    watch: {},
    computed: {},
    components: {
        'Menu': Menu,
    },
    created() {},
    mounted() {},
    beforeUnmount() {},
};

</script>