<template>
   <div v-if="isAdminPage" class="admin-wrap">
      <div :class="{ 'layout-wrap': true }">
         <AdminHeader v-show="isLogin" :userId="loggedInUserId"></AdminHeader>
         <AdminMenu v-show="isLogin"></AdminMenu>
         <div :class="{ 'login-wrap': !isLogin, 'main-wrap': isLogin }">
            <router-view @updateIsLogin="isLogin = $event" />
         </div>
         <AdminFooter v-show="isLogin"></AdminFooter>
      </div>
   </div>
   <div v-else>
      <Header></Header>
      <Menu></Menu>
      <div class="main-warp">
         <router-view />
      </div>
      <Footer></Footer>
   </div>
</template>

<script>
import { useStore } from "vuex";
import axios from "axios";
import Header from '../layout/Header.vue';
import Menu from '../layout/Menu.vue';
import Footer from '../layout/Footer.vue';
import AdminHeader from '../layout/AdminHeader.vue';
import AdminMenu from '../layout/AdminMenu.vue';
import AdminFooter from '../layout/AdminFooter.vue';
import AdminLogin from '../pages/admin/login/Login.vue'

const App = {
   data() {
      return {
         title: null,
         isLogin: false,
         loggedInUserId: null,
         userInfo: {
            user_id: null,
         },
         store: useStore(),
      };
   },
   methods: {
      // 로그인
      updateIsLogin: function (boolean) {
         console.log("newValue : ", newValue);
         this.isLogin = boolean;
         this.loggedInUserId = "test";
      },
      //로그인 사용자 조회
      loginUserSelectOne: function (callback) {
         let vm = this;
         axios({
            url: "/user/loginUserSelectOne.json",
            method: "post",
            headers: {
               "Content-Type": "application/json; charset=UTF-8",
            },
         }).then(function (response) {
            // console.log("getIsLogin - response : ", response);
            if (response.data.loginUser != null && response.data.loginUser['user_id'] != null) {
               vm.store.commit("setLoginUser", response.data.loginUser);
               vm.isLogin = true;
               vm.userInfo.user_id = response.data.loginUser['user_id'];
            } else {
               vm.store.commit("setLoginUser", null);
            }
            if (response.data.key != null && response.data.key['salt'] != null) {
               vm.store.commit("setKey", response.data.key);
            } else {
               vm.store.commit("setKey", null);
            }
            callback(response.data);
         }).catch(function (error) {
            console.log("getIsLogin - error : ", error);
         });
      }
   },
   watch: {

   },
   computed: {
      isAdminPage() {
         // 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단
         return this.$route.path.startsWith('/adm');
      }
   },
   components: {
      'Header': Header,
      'AdminHeader': AdminHeader,
      'Menu': Menu,
      'AdminMenu': AdminMenu,
      'Footer': Footer,
      'AdminFooter': AdminFooter,
      'AdminLogin': AdminLogin
   },
   mounted() {
      console.log('Vue mounted');
      this.loginUserSelectOne();
      // //vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
      this.$router.beforeEach((to, from, next) => {
         //로그인 유무(로그인 정보가 있으면 True, 없으면 False)
         const isLogin = this.isLogin;
         const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
         if (requiresAuth && !isLogin) {
            next('/adm/login.page');
         } else{
            next();
         }
      });

   }
}

export default App;
</script>

<style scoped>
.admin-wrap {
   width: 100%;
   height: 100%;
}

.layout-wrap {
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-columns: 200px minmax(1234px, 1fr);
   grid-template-rows: 50px 1fr 33px;
   grid-template-areas:
      "nav header "
      "nav  main  "
      "nav  footer  "
}

.layout-wrap .main-warp {
   padding: 30px;
   grid-area: main;
   background: #f8f8f8;
}

.login-wrap {
   grid-column: 1/3;
   grid-row: 1/4;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
</style>
