<template>
  <embed v-if="!!svgSrc" :src="svgSrc" :style="svgStyle" type="image/svg+xml">
  <div v-else :class="[c(),cusClass]" :style="sizeStyle">
    <div v-for="i in 12" :key="i" :class="[c('spinner'), c('spinner-' + i)]" :style="colorStyle"/>
  </div>
</template>

<script>
import {base} from '../../common/mixins'

export default {
  name: 'Spin',
  mixins: [base],
  props: {
    size: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '',
    },
    svgSrc: {
      type: String,
      default: '',
    },
    cusClass: {
      type: String,
      default: '',
    },
  },
  computed: {
    sizeStyle () {
      return {
        width: this.size,
        height: this.size,
      }
    },
    colorStyle () {
      return {
        color: this.color,
      }
    },
    svgStyle () {
      return {
        width: this.size || '100%',
        height: this.size || '100%',
      }
    },
  },
}
</script>

<style lang="stylus" scoped>

  $spinSize = 40px;
  $spin-color = #ccc;
  $spinner-count = 12;
  $animation-duration = 1.2s;

  .hls-spin {
    width: $spinSize;
    height: $spinSize;
    position: relative;
    display: inline-block;

    &-spinner {
      width: 100%;
      height: 100%;
      position: absolute;
      color: $spin-color;

      &:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 15%;
        height: 15%;
        background-color: currentColor;
        border-radius: 50%;
        animation: spinFadeInDelay $animation-duration infinite ease-in-out both;
      }

      for $i in 2 .. $spinner-count {
        &-{$i} {
          transform: rotate(360deg / $spinner-count * ($i - 1));

          &:before {
            animation-delay: ($animation-duration / $spinner-count * ($i - 1)) - $animation-duration;
          }
        }
      }
    }
  }

  @keyframes spinFadeInDelay {
    0%, 39%, 100% {
      opacity: 0.1;
    }

    40% {
      opacity: 1;
    }
  }
</style>