<template>
   <div v-cloak>
      <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';

const App = {
   data: () => {
      return {
         title: null,
         isLogin: false,
         userInfo: {
               user_id: null,
         },
         store: useStore(),
      };
   },
   methods: {
//로그인 사용자 조회
      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: {

   },
   components: {
      'Header': Header,
      'Menu': Menu,
      'Footer': Footer,
   },
   mounted: () => {
      console.log('Vue mounted');
      this.loginUserSelectOne();
      // //vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
      // this.$router.beforeEach((to, from, next) => {
      //       const vm=this;
      //       //console.log("to : ", to, ", from : ", from);
      //       //로그인 사용자 조회 후, callback을 통해 로그인 사용자 정보 받기
      //       this.loginUserSelectOne(function (store) {
      //           //로그인 유무(로그인 정보가 있으면 True, 없으면 False)
      //           let isLogin = (store.loginUser != null && store.loginUser['user_id'] != null);

      //           const authenticationState = store.loginUser;
      //           //authorization에서는 라우터에서 메타 속성을 정의해준 값이 담겨진다.
      //           // undefined, [], ["admin"], ["client"]가 올 수 있다.
      //           const { authorization } = to.meta;
      //           //로그인 상태 일 때
      //           if (isLogin == true) {
      //               //로그인 페이지 이동은 못하게 함
      //               if (to.path == '/Login.page') {
      //                   next(false);
      //               } else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
      //                   if (!authorization.includes(authenticationState?.user_author)) {
      //                       // 권한이 없는 유저는 not-found 페이지로 보낸다.
      //                       next({ path:"/"});
      //                   }
      //                   next();
      //               }
      //           } else {//로그인 상태가 아닐 때
      //               //로그인 페이지에서 다른 페이지로 이동하려고 할 때, 이동 못하게 함
      //               if (from.path == '/Login.page') {
      //                   next(false);
      //               } else {//로그인 페이지 이외의 페이지에서, 페이지 이동을 하려고 할 때
      //                   //로그인 페이지로 이동은 무조건 가능
      //                   if (to.path == "/Login.page") {
      //                       next();
      //                   } else {//로그인 페이지로 무조건 이동
      //                       next("/Login.page");
      //                   }
      //               }
      //           }
      //       });
      //   });  
   }
}

export default App;
</script>

<style></style>
