<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import "style.scss";
</style>

<!-- Template -->
<template>
  <div class="component-container loading-component">

    <b-modal centered no-fade no-close-on-backdrop no-close-on-esc hide-header-close
             size="sm"
             button-size="sm"
             ref="loadingModal">

      <div class="loading-hub">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div>加载中...</div>
    </b-modal>

  </div>
</template>

<!-- Script -->
<script>
  import {mapGetters} from 'vuex';

  const _Loading = {
    name: 'Loading',
    created: function () {
    },
    updated: function () {
    },
    mounted: function () {
    },
    activated: function () {
    },
    data: function () {
      return {};
    },
    methods: {
      open() {
        this.$refs.loadingModal.show();
      },
      close() {
        this.$refs.loadingModal.hide();
      }
    },
    components: {},
    computed: {
      ...mapGetters([])
    }
  };
  export default _Loading;
</script>
