<template>
  <div class="wrap bg-wrap">
	<div class="dimmed logoutConfirm" @click="logoutModalCancel();"></div>
		<div class="popup-wrap logoutConfirm">
			<!-- 수정 확인 -->
			<div class="popup logoutConfirm">
				<div class="pop-head">
					<h3 class="pop-tit">로그아웃</h3>
				</div>
				<div class="pop-cont">
          <p>로그아웃 하시겠습니까?</p>
				</div>
				<div class="popup-btn2">
					<button class="btn-pcolor" @click="logoutModalClose();">확인</button>
					<button class="btn-default" @click="logoutModalCancel();">취소</button>
				</div>
			</div>
    </div>
  </div>
</template>

<script>

import loginApi from "@/modules/login/service/api";

export default {
    name: "confirm",
	data(){
        return{
		      row:{},
        }
    },
	methods : {
    // 모달 오픈
    logoutModalOpen() {
      var dimmed = document.getElementsByClassName('logoutConfirm');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'block';
      }
      var headerDimmed = document.getElementsByClassName('headerDimmed');
      headerDimmed[0].style.display = 'block';
    },
    // 모달 끄기(ok)
    logoutModalClose() {
      var dimmed = document.getElementsByClassName('logoutConfirm');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      loginApi.logout().then(response => {
        if(response.data.retCode == '0000'){
          this.$store.commit("login/isLogin", false);
          this.$store.commit("login/isAuthChk", false);
          //loginApi.setToken(null);
          this.$store.commit("login/getMenuUrls",[]);
          delete sessionStorage.authToken;
          this.$router.push({
            path: "/login"
          });
        }
      });
    },
    // 모달 끄기(취소)
    logoutModalCancel() {
      var dimmed = document.getElementsByClassName('logoutConfirm');
      for (var i = 0; i < dimmed.length; i++) {
        dimmed[i].style.display = 'none';
      }
      var click = "clicked";
      var userBtn = document.querySelector('.user_wrap .user');
      if(userBtn.classList.contains(click)){
        userBtn.classList.remove(click);
      }
      else{
        userBtn.classList.add(click);
      }

      
    }
  }
}
</script>
<style>
.dimmed {z-index:1;}
.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0; z-index:10;}
.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
.popup-btn-wrap button:hover {background: #000; color: #fff;}
.popup {z-index:10;}
</style>