<template>
  <div v-if="load">

    <div v-if="auth" class="content">

      <nav>
        <router-link to="/">Главная</router-link>
        <div class="a_link" @click="OutLogin">Выход</div>
      </nav>
      <router-view/>




    </div>
    <authorization v-else></authorization>


  </div>
  <div v-else>

  </div>


</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex';
import Authorization from "./components/Authorization.vue";
export default {
  components: {Authorization},


  data() {
    return {
      load:false,
      info:'',
    }
  },
  computed: {
    ...mapState({
      auth: state=>state.ApiClass.auth,
      url_api: state=>state.ApiClass.url_api,
    }),



  },

  methods:{
    ...mapMutations({
      setAuth:'ApiClass/setAuth',
      setUser:'ApiClass/setUser',
    }),

    ...mapActions({
      loadData:'ApiClass/loadData',

    }),



    OutLogin(){
      this.setAuth(false);
      this.setUser({});
      localStorage.setItem('token', '');

    },
    validateToken(){

      //console.log(localStorage.token);


      if(typeof localStorage.token!=='undefined' &&  localStorage.token!=''){
        this.loadData({

          method:'post',
          url:this.url_api+'/api/authentication-jwt/validate_token.php',
          json:{
            jwt:localStorage.token,
          },


        }).then(
            (r)=>{
              //console.log(r)
              if(typeof r.result!=='undefined' && r.result===1){
                this.info='';
                this.setAuth(true);
                this.setUser(r.data);
              }else{
                if(typeof r.error!=='undefined'){
                  this.info=r.error;
                }
                this.setAuth(false);
                this.setUser({});
              }

            }

        ).catch(
            (e)=>{
              if(typeof e.error!=='undefined'){
                this.info=e.error;
              }
              this.setAuth(false);
              this.setUser({});
            }



        ).finally(
            ()=>{
              this.load=true;

            }

        )

        ;
      }else{
           this.load=true;

      }


    },





  },

  mounted(){
    this.validateToken();

  }


}



</script>


<style>
@import './assets/fonts/fonts.css';
@import './assets/main.css';


*{
  margin:0;
  padding: 0;
  font-family: Inter;

}

#app {

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f8f8f8;
  color: #2c3e50;
}
.content{
  max-width: 800px;
  height: 100vh;
  margin: auto;
  background: #ffffff;
  padding: 0px 10px;
}


nav {
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  gap:20px;
  justify-content: end;

  align-items: center;
  height: 30px;
}

nav a {
  font-weight: bold;
  color: #364d64;
}

nav a.router-link-exact-active {
  color: #5f88b0;
}

.error_downloads{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #d0b2b2;
  border-radius: 8px;
  color: #501717;
}

.a_link{
  text-decoration: underline;
  font-weight: bold;
  color: #364d64;
  cursor: pointer;
}

.a_link:hover{
  color: #09151f !important;
}


</style>

