<template>
    <div class="header">
        <div class="w1400">
            <ul class="flex-end ">
                <li class="name" v-if="store.state.loginUser != null">
                    <p v-if="store.state.loginUser.user_auth === 'company'">{{ store.state.loginUser.company_nm }}
                        <span>님</span></p>
                    <p v-else>{{ store.state.loginUser.user_id }} <span>님</span></p>
                </li>
                <li class="login" v-else>
                    <router-link to="/Login.page"><i class="fa-solid fa-user fa-lg" style="color: #ffffff;"></i>
                        로그인</router-link>
                </li>
                <li class="logout" v-if="store.state.loginUser != null" @click="logout()">
                    로그아웃
                </li>
                <li class="join" v-else>
                    <router-link to="/Join.page"> <i class="fa-solid fa-user-plus fa-lg" style="color: #ffffff;"></i>
                        회원가입</router-link>
                </li>
            </ul>
            <!-- <Menu class="menu" :isActive="isActive"></Menu> -->
        </div>
    </div>
</template>

<script>
import { useStore } from "vuex";
import axios from "axios";

export default {
    data() {
        return {
            store: useStore(),
        }
    },
    methods: {
        //로그아웃
        logout: function () {
            if (confirm("로그아웃 하시겠습니까?") == false) {
                return;
            }
            let vm = this;
            axios({
                url: "/user/logout.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
            })
                .then(function (response) {
                    // console.log("logout - response : ", response);
                    vm.store.state.loginUser = null;

                    if(window.location.href.slice(-1) === '/') {
                        vm.$router.go(0);
                    } else {
                        vm.$router.push({ path: "/", query: {} });
                    }
                    
                })
                .catch(function (error) {
                    console.log("logout - error : ", error);
                });
        },
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Header mounted');
    }
}
</script>

<style scoped></style>