<template>
  <div v-if="loading" class="loading-mask load">
    <div class="loading" :style="style"></div>
    <span class="loading-text">{{msg}}</span>
  </div>
</template>
<script>
    import config from '../../../lib/config'
    export default {
        name: "loading",
        data(){
          return {
            loading:false,
            msg:'',
            style:{
              background: 'url("'+config.baseUrl+'/static/icons/loading.gif") center center no-repeat',
              backgroundSize:'1.68rem'
            }
          }
        },
        methods:{
          open(status){
            this.loading = true
          },
          close(status){
            if (status){
              this.loading = false
            }
          }
        }
    }
</script>
<style scoped>
  .loading{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .1rem;
    overflow: hidden;
  }
  .loading-mask{
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loading-text{
    display: block;
    margin-top: 1.2rem;
  }
  .load{
    animation: loadAni .3s 0s 1 forwards;
  }
  @keyframes loadAni{
    to{
      opacity: 1;
    }
  }
</style>
