<template>
  <transition name="fdc-indicator">
    <div class="fdc-indicator" v-show="visible">
      <div class="fdc-indicator-wrapper" :class="text && 'has-text'">
        <spinner class="fdc-indicator-spin" :type="convertedSpinnerType" :size="64"></spinner>
        <span class="fdc-indicator-text" v-show="text">{{ text }}</span>
      </div>
      <div class="fdc-indicator-mask" @touchmove.stop.prevent></div>
    </div>
  </transition>
</template>

<style lang="scss">
.fdc {
  &-indicator {
    transition: opacity .2s linear;
    position: absolute;
    z-index: 2000;
    &-wrapper {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      box-sizing: border-box;
      text-align: center;
      padding: 30px;
      &.has-text{
        padding: 40px;
      }
    }

    &-text {
      display: block;
      color: #fff;
      text-align: center;
      margin-top: 20px;
      font-size: 32px;/*px*/
    }

    &-spin {
      display: inline-block;
      text-align: center;
    }

    &-mask {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      size: 100%;
      opacity: 0;
      background: transparent;
    }
  }
}

.fdc-indicator-enter,
.fdc-indicator-leave-active {
  opacity: 0;
}
</style>

<script type="text/babel">
  import Spinner from 'fdc-ui/packages/spinner/index.js';
  if (process.env.NODE_ENV === 'component') {
    require('fdc-ui/packages/spinner/style.css');
  }

  export default {
    data() {
      return {
        visible: false
      };
    },

    components: {
      Spinner
    },

    computed: {
      convertedSpinnerType() {
        switch (this.spinnerType) {
          case 'double-bounce':
            return 1;
          case 'triple-bounce':
            return 2;
          case 'fading-circle':
            return 3;
          default:
            return 0;
        }
      }
    },

    props: {
      text: String,
      spinnerType: {
        type: String,
        default: 'snake'
      }
    }
  };
</script>
