<template>
 <div class="wrapper ">
    <Header />
    <div class="container "><router-view /> 
      <button class="scroll-up"  @click="scrollToTop">
      <img src="../resources/images/icon/top.png" alt="">
    </button>
    </div>
  
  </div>
  <Footer />
</template>
<script>
import Header from './layout/Header.vue';
import Footer from './layout/Footer.vue';

export default {

  components: {
    Header: Header,
    Footer: Footer,
  },
  async mounted() {
    // Access Token이 없거나 만료된 경우 새로 발급 요청
    const token = this.$store.state.authorization; // Vuex 스토어에서 직접 가져오기
    if (!token) {
      await this.refreshToken();
    }
  },
  methods: {
    async refreshToken() {
      try {
        const res = await axios.post("/refresh/tknReissue.json", {}, {
          headers: {
            "Content-Type": "application/json; charset=UTF-8",
          },
        });

        if (res.status === 200) {
          // 새로 발급 받은 AccessToken 저장
          this.store.commit('setAuthorization', res.headers.authorization);
          // JWT 토큰 디코딩
          const base64String = res.headers.authorization.split('.')[1];
          const base64 = base64String.replace(/-/g, '+').replace(/_/g, '/');
          const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          }).join(''));
          const mbr = JSON.parse(jsonPayload);
          this.store.commit("setUserNm", mbr.userNm); // 사용자 이름 저장
          this.store.commit('setRoles', mbr.roles); // 사용자 역할 저장
        } else {
          alert('토큰 재발급 요청 실패');
          this.$router.push('/login.page');
        }
      } catch (error) {
        alert('세션이 종료되었습니다.\n로그인을 새로 해주세요.');
        this.store.commit("setStoreReset");
        this.$router.push('/login.page'); // 로그인 페이지로 리다이렉트
      }
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 부드러운 스크롤 효과
      });
    },
  },
}
</script>
<style></style>