<!--
Program: LoadingBar
Author: SDL
Description: Loadingbar Common Component
-->
<template>
  <modal name="loadingbar" :scrollable="false" :click-to-close="false" classes="modal-sm" :width="270" :height="400" @before-open="beforeOpened">
    <div class="flex-loading">
      <div class="spinner-border spinner-border-lg" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div v-if="params.msg" class="loadingBarMessage">
        <p style="text-align: center; font-weight: bold" v-html="$t(params.msg)"></p>
      </div>
    </div>
  </modal>
</template>

<script>
export default {
  name: 'loadingbar',
  data() {
    return {
      params: {},
    };
  },
  methods: {
    beforeOpened(event) {
      this.params = event.params || {};
    },
  },
};
</script>
<style scoped>
.flex-loading {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.loadingBarMessage {
  margin-top: 10px;
  padding-top: 17px;
  padding-bottom: 1px;
  background-color: white;
  border-radius: 20px;
  opacity: 0.7;
}

.spinner-border.spinner-border-lg {
  margin-left: 100px;
}
</style>
