<template>
  <v-app>
    <v-main>
      <Alert
        :open="alertOpen"
        :message="message"
        :type="type"
      />

      <Loading 
        :open="loadingModal"
        :message="message"
      />

      <Bluetooth 
        :open="bluetoothModal"
      />

      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import { EventBus } from '@/event-bus'

import Alert from './components/Alert.vue'
import Loading from './components/Loading.vue'
import Bluetooth from './components/Bluetooth.vue'

export default {
  name: 'App',

  components: {
    Alert,
    Loading,
    Bluetooth,
  },

  created() {
    this.$store.dispatch('getSerial')

    EventBus.$on('openAlert',( massage , type) => { 
      this.alertOpen = true, 
      this.message = massage,
      this.type = type
    }),

    EventBus.$on('closeAlert',() => { this.alertOpen = false })

    EventBus.$on('openLoading',( massage ) => { 
      this.loadingModal = true 
      this.message = massage
    }),

    EventBus.$on('closeLoading',() => { this.loadingModal = false })

    EventBus.$on('openBluetooth',() => { this.bluetoothModal = true }),

    EventBus.$on('closeBluetooth',() => { this.bluetoothModal = false })
  },

  data: () => ({
    bluetoothModal:false,
    loadingModal:false,
    alertOpen: false ,
    message:'',
    type:'',
  }),

  beforeDestroy(){
    EventBus.$off('openAlert');
    EventBus.$off('closeAlert');
    EventBus.$off('openLoading');
    EventBus.$off('closeLoading');

  }
};
</script>
<style lang="scss">

html,body{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%
}

#app {
  background-color:#CFD8DC;
  height: 100%;
  width: 100%;
}

html  {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}


</style>
