<template>
  <div class="loading"
       v-if="show"
       @touchmove.prevent>
    <div class="loading__mask"
         v-show="mask"></div>
    <div class="loading__wrapper">
      <div class="loading__main">
        <div class="loading__gif-wrapper"
             :class="[{s:!!text},`loading__gif-wrapper--${icon}`]">
        </div>
        <p class="loading__text bk"
           v-if="text">{{text}}</p>
      </div>

    </div>
  </div>
</template>

<script>
import config from './config';

export default {
  name: 'Loading',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    mask: {
      type: Boolean,
      default: () => config.props.mask
    },
    icon: {
      type: String,
      default: () => config.props.icon
    },
    text: {
      type: String,
      default: () => config.props.text
    }
  },
  data() {
    return {
    };
  },
  computed: {
    imgSrc() {
      return this[this.icon];
    }
  },
  methods: {
  }
};
</script>
