<template>

  <div  class="dialog"  >

    <div   class="dialog__content">

    <div style="margin-bottom: 15px;">
      <my-input  :type_input="`text`"

                :exception="true"
                v-model="email"
                placeholder="Логин"/>

    </div>
    <div style="margin-bottom: 15px;">
      <my-input  :type_input="`password`"

                :exception="true"
                 v-model="passwd"
                placeholder="Пароль"/>

    </div>
    <my-button  @click="Login" style="float: right" type="submit">Ввод</my-button>
    <div @click="info=null" v-if="info">{{ info }}</div>

    <div  style="clear:both"></div>

    </div>
  </div>




</template>

<script>
import MyButton from "./UI/MyButton.vue";
import MyInput from "./UI/MyInput.vue";
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'


export default {
  name: "Authorization",
  components: {MyInput, MyButton},
  data(){
    return {
        info:null,
        email:null,
        passwd:null,


    }

  },
  computed: {
    ...mapState({
      url_api:'',

    }),
    ...mapGetters({


    }),

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

    }),


    Login(){

    this.loadData(
        {
          method:'post',
          json:{ email:this.email,
                 password:this.passwd,
          },
          url: 'https://tsd.book-online.ru/api/authentication-jwt/login.php', //process.env.VUE_APP_API_HOST+'/authentication-jwt/login.php',



        }

    ).then(
        (r)=>{
          //console.log(r);

          if(typeof r.jwt!=='undefined'){
            this.info='';
            localStorage.setItem('token', r.jwt);
            this.setAuth(true);
          }else{
            this.info='неправильный пароль или логин';
            if(typeof r.message!=='undefined'){
              this.info=r.message;
            }

          }


        }


    )






    },





  },




}
</script>

<style scoped>
.dialog{

  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(236, 236, 236, 0.5);
  position: fixed;

  display: flex;
  align-items: center;
  justify-content: center;

}
.dialog__content{

  width: 300px;
  border:1px solid #d8d8d8;
  border-radius: 10px ;
  padding: 20px;

  background: #ffffff;
}

.dialog__content input{
  border-radius: 5px ;

}


</style>