<template>
  <span class="upanapp-spinner" :class="className" :style="styles"></span>
</template>

<script>
import Spinner from './spinner'
const types = ['android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral']

export default {
  name: 'ua-spinner',
  mounted () {
    this.$nextTick(() => {
      Spinner(this.$el, this.type, this.size)
    })
  },
  props: {
    type: {
      type: String,
      default: 'ios'
    },
    size: String
  },
  computed: {
    styles () {
      if (typeof this.size !== 'undefined' && this.size !== '28px') {
        return {
          width: this.size,
          height: this.size
        }
      }
    },
    className () {
      let rs = {}
      for (let i = 0; i < types.length; i++) {
        rs[`upanapp-spinner-${types[i]}`] = this.type === types[i]
      }
      return rs
    }
  }
}
</script>

<style>
.upanapp-spinner {
  stroke: #444;
  fill: #444;
  vertical-align: middle;
  display: inline-block;
  width: 28px;
  height: 28px;
}

.upanapp-spinner svg {
  width: 28px;
  height: 28px;
}

.upanapp-spinner.upanapp-spinner-inverse {
  stroke: #fff;
  fill: #fff;
}

.upanapp-spinner-android {
  stroke: #4b8bf4;
}

.upanapp-spinner-ios, .upanapp-spinner-ios-small {
  stroke: #69717d;
}

.upanapp-spinner-spiral .stop1 {
  stop-color: #fff;
  stop-opacity: 0;
}

.upanapp-spinner-spiral.upanapp-spinner-inverse .stop1 {
  stop-color: #000;
}

.upanapp-spinner-spiral.upanapp-spinner-inverse .stop2 {
  stop-color: #fff;
}
</style>
