<template>
  <view :class="classRender">
    <view
      :class="innerClassRender"
      :style="styleRender"
    >
			<template v-if="type === 'spinner'">
				<view
					v-for="index in 12"
					:key="index"
				  class="zui-loading__dot"
				/>
			</template>
    </view>
    <view class="zui-loading__text" :style="textSizeRender">
      <slot v-if="$slots.default"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'zui-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',	this.type ? `zui-loading--${this.type}` : '',	this.vertical ? 'zui-loading--vertical' : ''];
		},
		innerClassRender: function() {
			return ['zui-loading__spinner', `zui-loading__spinner--${this.type}`];
		},
    styleRender: function() {
			const iconSize = typeof this.textSize === 'number' ? this.textSize + 'px' : this.textSize;
      return `color: ${this.color}; width: ${iconSize}; height: ${iconSize}`;
    },
		textSizeRender: function() {
			return `font-size: ${this.textSize}${typeof this.textSize === 'number' ? 'px' : ''};`;
		}
  }
};
</script>

<style lang="scss">
@import "./index.scss";
</style>