<template>
   <div v-if="isAdminPage" class="admin-wrap">
      <div :class="layoutClass">
         <AdminHeader v-show="isLogin" :mngrId="mngrInfo" @updateIsLogin="isLogin = $event"></AdminHeader>
         <AdminMenu v-show="isLogin"></AdminMenu>
         <div :class="{ 'login-wrap': !isLogin, 'main-wrap': isLogin }">
            <router-view @updateIsLogin="isLogin = $event" />
         </div>
      </div>
   </div>
   <div v-else class="user-wrap">
      <Header></Header>
      <Menu></Menu>
      <div class="main-warp">
         <router-view />
      </div>
      <Footer></Footer>
   </div>
   <div v-if="isModalOpen" class="modal-wrapper">
      <div class="modal-container admin-alert">
         <p class="modal-text">
            해당글은 정회원에게 공개된 게시물 입니다.<br />
            (준회원은 가입 승인 이후 열람 가능하며,<br />
            비회원은 회원가입이 필요합니다.)
         </p>
         <div class="modal-end">
            <button class="dark-gray-btn" @click="closeModal()" style="width:100%">닫기</button>
            <button class="blue-btn" v-if="userInfo.user_id == null" @click="loginMove" style="width:100%">로그인</button>
         </div>
      </div>
   </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 { debounce } from 'lodash'

const App = {
   data() {
      return {
         title: null,
         isLogin: false,
         loggedInUserId: null,
         userInfo: {
            user_id: null,
         },
         mngrInfo: {
            mngr_id: null,
         },
         store: useStore(),
         screenType: 'large',
         // 모달창 오픈 상태
         isModalOpen: false,
      };
   },
   created() {
      // 디바운스된 이벤트 핸들러 생성
      this.debouncedHandleResize = debounce(this.handleResize, 200); // 200ms 디바운스
   },
   methods: {
      openModal: function () {
         this.isModalOpen = true;
      },

      closeModal: function () {
         this.isModalOpen = false;
         this.modalType = null;
      },


      // 로그인
      updateIsLogin: function (boolean) {
         this.isLogin = boolean;
      },
      //로그인 사용자 조회
      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);
         });
      },
      //로그인 사용자 조회
      loginAdminSelectOne: function (callback) {
         let vm = this;
         axios({
            url: "/loginManagerSelectOne.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['mngr_id'] != null) {
               vm.store.commit("setLoginUser", response.data.loginUser);
               vm.isLogin = true;
               vm.mngrInfo.mngr_id = response.data.loginUser['mngr_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);
         });
      },
      // 반응형을 위한 핸들러
      handleResize: function () {
         const screenWidth = window.innerWidth;
         if (screenWidth < 821) {
            this.screenType = 'small';
         } else if (screenWidth <= 1366) {
            this.screenType = 'medium';
         } else {
            this.screenType = 'large';
         }
      },

      loginMove: function () {
         this.$router.push('/Login.page');
         this.isModalOpen = false
      }
   },
   watch: {

   },
   computed: {
      isAdminPage() {
         // 현재 URL을 기반으로 사용자와 관리자 페이지 여부를 판단
         return this.$route.path.startsWith('/adm');
      },
      layoutClass() {
         return {
            'layout-wrap-small': this.screenType === 'small',
            'layout-wrap-medium': this.screenType === 'medium',
            'layout-wrap-large': this.screenType === 'large',
         };
      },
   },
   components: {
      'Header': Header,
      'AdminHeader': AdminHeader,
      'Menu': Menu,
      'AdminMenu': AdminMenu,
      'Footer': Footer,
   },
   mounted() {
      //vue router에게 페이지 변경 요청을 하여, router가 페이지 변경 전, 실행되는 훅(이벤트)
      this.$router.beforeEach((to, from, next) => {
         const currentPath = to.path;
         if (currentPath.startsWith('/adm')) {
            //관리자
            this.loginAdminSelectOne(function (store) {
               //로그인 유무(로그인 정보가 있으면 True, 없으면 False)
               let isLogin = (store.loginUser != null && store.loginUser['mngr_id'] != null);
               //로그인 상태 일 때
               if (isLogin == true) {
                  //로그인 페이지 이동은 못하게 함
                  if (to.path == '/adm/login.page') {
                     next(false);
                  } else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
                     next();
                  }
               } else {//로그인 상태가 아닐 때
                  //로그인  다른 페이지로 이동하려고 할 때, 이동 못하게 함
                  if (from.path == '/adm/login.page') {
                     next(false);
                  } else {//로그인 페이지 이외의 페이지에서, 페이지 이동을 하려고 할 때
                     //로그인 페이지로 이동은 무조건 가능
                     if (to.path == "/adm/login.page") {
                        next();
                     } else {//로그인 페이지로 무조건 이동
                        next("/adm/login.page");
                     }
                  }
               }
            });
         } else {
            //로그인 사용자 조회 후, callback을 통해 로그인 사용자 정보 받기
            this.loginUserSelectOne((store) => {
               //로그인 유무(로그인 정보가 있으면 True, 없으면 False)
               let isLogin = (store.loginUser != null && store.loginUser['user_id'] != null);
               const authenticationState = store.loginUser;
               const { authorization } = to.meta;
               const nonMember = authenticationState == null ? '비회원' : '회원'

               //로그인 상태 일 때
               if (isLogin == true) {
                  const memberType = authenticationState.create_account_approval === 'Y' ? '정회원' : '준회원';
                  const memberTypeDetail = memberType === '정회원' ? (authenticationState.user_auth === 'common' ? '일반 정회원' : '기업 정회원') : '준회원';
                  //로그인 페이지 이동은 못하게 함
                  if (to.path == '/Login.page') {
                     next(false);
                  } else {//로그인 페이지 이 외의 페이지들을 이동 가능하게 함
                     if (!authorization.includes(memberTypeDetail)) {
                        // 권한이 없는 유저는 모달창 띄우고 그 페이지에 그대로
                        this.isModalOpen = true;
                        next(false);
                     }
                     next();
                  }
               } else {//로그인 상태가 아닐 때
                  // 로그인 상태가 아니면 권한이 없는게 있어 넣어줘야함
                  if (!authorization.includes(nonMember)) {
                     this.isModalOpen = true;
                     next(false);
                  }
                  next();
               }
            });
         }
      });
      window.addEventListener('resize', this.debouncedHandleResize);
      this.handleResize();
   },
   beforeDestroy() {
      window.removeEventListener('resize', this.debouncedHandleResize);
   },
}

export default App;
</script>

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

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

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

.user-wrap .main-warp {
   min-height: 70rem;
}

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


</style>
