<template>
  <div class="mu-loading-mask" v-show="isShow" :style="styleLoading">
    <i class="el-icon-loading"></i>
    <span class="load-text" v-if="!!text">{{text}}</span>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue';
  import { Component, Prop } from 'vue-property-decorator';

  @Component
  export default class muLoading extends Vue {
    @Prop() isShow: boolean;
    @Prop() styleLoading: any;
    @Prop() text: string;
  }
</script>

<style lang="scss" scoped>
  .mu-loading-mask {
    position: absolute;
    z-index: 3000;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .3s;
    text-align: center;

    .mu-icon-loading {
      width: 42px;
      font-size: 42px;
      color: #1067AF;
      top: calc(50% - 21px);
      left: calc(50% - 21px);
      text-align: center;
      position: absolute;
      animation-name: fadeIn;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-play-state: running;
    }

    .el-icon-loading {
      font-size: 16px;
      color: #666;
      top: calc(50% - 21px);
      left: calc(50% - 21px);
      text-align: center;
      position: absolute;
    }

    .load-text {
      font-size: 12px;
      color: #ffffff;
      top: calc(50% + 20px);
      left: calc(50% - 25px);
      text-align: center;
      position: absolute;
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0.2;
    }
    20% {
      opacity: 0.7;
    }
    50% {
      opacity: 1;
    }
    70% {
      opacity: 0.7;
    }
    100% {
      opacity: 0.2;
    }
  }
</style>
