<template>
  <div :class="classRender">
    <span :class="spanClassRender" :style="spanStyleRender">
      <template v-if="showSpinner">
        <i v-for="i in 12" :key="i"></i>
      </template>
      <svg v-else class="zui-loading__circular" viewBox="25 25 50 50" :style="spanStyleRender">
        <circle cx="50" cy="50" r="20" fill="none" />
      </svg>
    </span>
    <template v-if="$slots.default">
      <span class="zui-loading__text" :style="textStyleRender">
        <slot></slot>
      </span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Loading',
  props: {
    color: String,
    size: {
      type: [Number, String],
      default: '2rem'
    },
    vertical: Boolean,
    textSize: [Number, String],
    type: {
      type: String,
      default: 'circular',
    },
  },
  computed: {
    classRender: function() {
      return {
        'zui-loading': true,
        ['zui-loading--' + this.type]: this.type,
        'zui-loading--vertical': this.vertical,
      };
    },
    spanClassRender: function() {
      return {
        'zui-loading__spinner': true,
        ['zui-loading__spinner--' + this.type]: this.type,
      };
    },
    spanStyleRender: function() {
      var style = { color: this.color };
      if (this.size) {
        var iconSize = typeof this.size == 'number' ? this.size + 'px' : this.size;
        style.width = iconSize;
        style.height = iconSize;
      }
      return style;
    },
    textStyleRender: function() {
      var textSize = typeof this.textSize == 'number' ? this.textSize + 'px' : this.textSize;
      return {
        fontSize: textSize
      };
    },
    showSpinner: function() {
      return this.type == 'spinner';
    }
  }
};
</script>

<style>
@import "./index.css";
</style>