<template lang="pug">
  div#app(v-show='$auth.ready()')
    div(v-if='$auth.check()')
      modal-feedback
      the-header
      the-notifications
      .app(@click="closeNotifications")
        the-menu
        .background--transition
          transition(name="enter" mode="out-in")
            router-view(v-if='$auth.ready()')
    base-auth(v-if='!$auth.check()')
    vue-progress-bar
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import BaseAuth from '@/components/BaseAuth.vue'
import TheHeader from '@/components/TheHeader.vue'
import TheMenu from '@/components/TheMenu.vue'
import TheNotifications from '@/components/TheNotifications.vue'
import ModalFeedback from '@/components/aditionals/ModalFeedback.vue'

export default {
  name: 'App',
  components: {
    BaseAuth,
    TheHeader,
    TheMenu,
    ModalFeedback,
    TheNotifications
  },
  mounted () {
    this.$auth.ready(async () => {
      if (this.$auth.check()) {
        await this.loadData()
      }
    })
    this.$Progress.finish()
  },
  created () {
    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      to.meta.color !== undefined && document.querySelector('meta[name=theme-color]').setAttribute('content', to.meta.color)
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  },
  computed: {
    ...mapGetters([
      'alertMessage',
      'acceptAlert'
    ])
  },
  watch: {
    alertMessage: function (alertMessage) {
      this.$vm.dialog({
        color: alertMessage.color,
        title: this.$t(alertMessage.title),
        text: this.$t(alertMessage.text)
      })
    },
    acceptAlert: function (acceptAlert) {
      if (acceptAlert) {
        this.$vm.notify({
          color: acceptAlert.color,
          title: this.$t(acceptAlert.title),
          text: this.$t(acceptAlert.text),
          icon: acceptAlert.icon
        })
      }
    }
  },
  methods: {
    ...mapActions([
      'loadData',
      'setAcceptAlert',
      'closeNotifications'
    ]),
    changeLocale (locale) {
      this.$i18n.set(locale)
    }
  }
}
</script>

<style lang="scss">
/* @import '~bootstrap/scss/bootstrap'; */
@import './style/eva/scss/eva-icons';
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #000;
  line-height: 1.5;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  text-transform: none;
  text-decoration: none;
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    display: block
  }
  ::-webkit-scrollbar-thumb {
    background: #e4eaf5;
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb {
    &:hover {
      background: rgb(196, 201, 211)
    }
  }
}

a {
  color:  rgba(var(--primary),1);
}

input, button, select, optgroup, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.justify-content-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.form-group {
  margin-bottom: 1rem;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.container-fluid {
    width: 100%;
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
    min-height: 100%;
    @media only screen and (max-width: 600px) {
      padding-right: 5px;
      padding-left: 5px;
    }
}
#app {
  .app {
    display: flex;
    height: 100vh;
    background: rgba(var(--primary),1);
  }
  .background--transition {
    background-color: #fafafa;
    padding-top: 70px;
    min-height: 100%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    width: 100%;
    overflow: auto;
  }
  .crud {
    .footer {
      z-index: 1000;
      background: rgba(var(--primary),1);
      width: 100%;
      padding: 5px;
      /* margin-top: 40px; */
      justify-content: flex-end;
      display: flex;
      button {
        margin: 5px;
      }
    }
    .heading {
      margin-bottom: 15px;
      .vm-col {
        &:first-child {
          div {
            &:last-child {
              padding-left: 20px
            }
          }
        }
      }
      .vm-button {
        margin: 0 3px;
      }
    }
    .card {
      margin-bottom: 40px;
      background: white;
      padding: 5px;
      border-radius: 5px;
      box-shadow: 5px 5px 25px 0 rgba(46,61,73,.11);
      .form {
        .con-select {
          width: 100%;
        }
      }
      .vm-con-table {
        width: 100%;
      }
    }
    .float {
      position:fixed;
      bottom:40px;
      right:40px;
      z-index: 1000;
    }
    .total-records {
      position: absolute;
      margin-top: -28px;
      right: 55px;
      color: rgba(var(--primary),1);
    }
  }
  .enter-enter-active, .enter-leave-active {
    transition: all .2s ease;
  }
  .enter-enter, .enter-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  @media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .form-group {
      margin-bottom: 2rem;
    }
    .vm-button {
      padding: 15px;
    }
  }
}
</style>
